Usar el selector 'comienza con' en los nombres de clase individuales

Si tengo lo siguiente:

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

Puedo usar el siguiente selector para encontrar los dos primeros DIV:

$("div[class^='apple-']")

Sin embargo, si tengo esto:

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

Solo encontrará el segundo DIV, ya que la clase del primer div se devuelve como una cadena (creo) y en realidad no comienza con 'apple-' sino más bien 'some-'

Una forma de evitar esto es no usar comienza con, sino que contiene:

$("div[class*='apple-']")

El problema con eso es que también seleccionará el 3er DIV en mi ejemplo.

Pregunta: A través de jQuery, ¿cuál es la forma correcta de usar selectores de predicados en nombres de clase individuales, en lugar de todo el atributo de clase como una cadena? ¿Es solo una cuestión de agarrar la CLASE, luego dividirla en una matriz y luego recorrer cada una individualmente con expresiones regulares? ¿O hay una solución más elegante / menos detallada?

Clases que comienzan con "apple-" más clases que contienen "apple-"

$("div[class^='apple-'],div[class*=' apple-']")

Recomiendo hacer de "apple" su propia clase. Debería evitar los comienzos con / termina con si puede porque poder seleccionar usando div.applesería mucho más rápido. Esa es la solución más elegante. No tenga miedo de dividir las cosas en clases separadas si hace que la tarea sea más simple / rápida.

esto es para prefijo con

$("div[class^='apple-']")

esto es para empezar, así que no necesitas tener el caracter '-' ahí

$("div[class|='apple']")

Puede encontrar muchas otras variaciones interesantes del selector jQuery aquí https://api.jquery.com/category/selectors/

Si bien la respuesta principal aquí es una solución para el caso particular del autor de la pregunta, si está buscando una solución para usar realmente 'comienza con' en nombres de clase individuales:

Puede usar este selector jQuery personalizado, al que llamo :acp()"A Class Prefix". El código está al final de esta publicación.

var test = $('div:acp("starting_text")');

Esto seleccionará todos y cada uno de los <div>elementos que tengan al menos un nombre de clase que comience con la cadena dada ("texto_inicio" en este ejemplo), independientemente de si esa clase está al principio o en otra parte de las cadenas de atributos de clase.

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

Esto devolverá los elementos 1, 2 y 3, pero no 4 o 5.

Aquí está la declaración para el :acpselector personalizado, que puede poner en cualquier lugar:

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

Hice esto porque hago un montón de pirateo de sitios web de GreaseMonkey en los que no tengo control de back-end, por lo que a menudo necesito encontrar elementos con nombres de clase que tengan sufijos dinámicos. Ha sido muy útil

Prueba esto:

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

en este caso, la pregunta de Josh Stodola es correcta Clases que comienzan con "apple-" más clases que contienen "apple-"

$("div[class^='apple-'],div[class*=' apple-']")

pero si el elemento tiene múltiples clases como esta

<div class="some-class apple-monkey"></div>
<div class="some-class apple-horse"></div>
<div class="some-class cow-apple-brick"></div>

entonces la solución de Josh Stodola no funcionará
porque esto tiene que hacer algo como esto

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

puede ser que ayuda a alguien más gracias

Si un elemento tiene múltiples clases "[class ^ = 'apple-']" no funcionan, por ejemplo

<div class="fruits apple-monkey"></div>