seleccionar - selectores hijos jquery

Usar el selector ''comienza con'' en nombres de clases individuales

Question

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 buscar los primeros dos 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 primera clase de div se devuelve como una cadena (creo) y en realidad no comienza con ''apple-'' sino más bien ''some-''

Una forma de evitarlo es comenzar con, pero en su lugar 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 clases individuales, en lugar de utilizar el atributo de clase completo como una cadena? ¿Es solo cuestión de tomar la CLASE, luego dividirla en una matriz y luego recorrer cada una con expresiones regulares? ¿O hay una solución más elegante / menos detallada?

Answer 1

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

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

Answer 2

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;
})

Answer 3

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

Puede usar este selector jQuery personalizado, que yo llamo :acp() para "Un prefijo de clase". El código está en la parte inferior de esta publicación.

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

Esto seleccionará todos y cada uno de los elementos <div> que tengan al menos un nombre de clase que comience con la cadena dada ("beginning_text" en este ejemplo), independientemente de si esa clase está al principio o en cualquier 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 containsapp = $(''div:acp("app")'');

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

Aquí está la declaración para el selector personalizado :acp , que puede colocar 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);
    }
});

Lo hice porque hago un montón de hackeo de sitios web en los que no tengo control de back-end, así que a menudo necesito encontrar elementos con nombres de clase que tengan sufijos dinámicos. Ha sido muy útil.

Answer 4

Yo recomendaría hacer "apple" su propia clase. Deberías evitar el inicio-con / final-con si puedes porque poder seleccionar usando div.apple serí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 / más rápida.

Answer 5

esto es para el prefijo con

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

esto es para comenzar así que no necesitas tener el ''-'' char allí

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

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

Answer 6

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

en este caso, como respuesta, la respuesta de Josh Stodola es correcta. Clases que comienzan con "manzana" más clases que contienen "manzana".

$("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á
para 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 ayude a alguien más gracias