selettore jQuery: selezione di una determinata combinazione di classi quando esistono più

Question

Ho provato a fare qualche ricerca già e non ho trovato nulla, ma se ho perso la risposta, per favore dimmi. Fondamentalmente ho più elementi con più classi ciascuno, ma le combinazioni sono uniche. Voglio selezionare una determinata combinazione di classi, ma non altri elementi che hanno questi elementi in combinazione con altri.

Vorrei sapere se questo selettore esiste in jQuery o se esiste un altro modo per realizzare ciò che sto spiegando. Vedere l'esempio di seguito:

<div class="a b c"></div> 
<div class="a b c d"></div> 
<div class="a b c d">/div> 

Quando si cerca di accedere solo l'elemento con le classi a b c, ho provato con:

$('.a.b.c').each(function() { 
    console.log($(this)); 
} 

l'output è:

[ <div class="a b c">...</div> , 
<div class="a b c d">...</div , 
<div class="a b c d">...</div> ] 

Cerco l'output deve essere:

[ <div class="a b c">...</div> ] 

Qualsiasi consiglio è apprezzato. Grazie!

Answer 1

È possibile utilizzare il CSS3 :not() pseudo class per negare la classe .d: (example)

$('.a.b.c:not(.d)').each(function() { 
    console.log($(this)); 
}); 

---

jQuery ha anche un .not() method: (example)

$('.a.b.c').not('.d').each(function() { 
    console.log($(this)); 
}); 

---

Si potrebbe anche utilizzare l'attributo selettore: (example)

[class="a b c"] 

Nota che l'ordine deve essere sempre a b c. Lasciandolo lì fuori come opzione.

Answer 2

Non credo che si possa fare questo con selettori CSS diritti, a meno di usare: non enumerare ogni altra classe che si desidera escludere o qualche ginnastica reale con [class =]. Tuttavia, ciò che si può fare è selezionare tutti gli elementi con le classi .abc, e poi filtrare tutti gli elementi che hanno più di tre elementi nel loro elenco di classe:

var $abcDivs = $('.a.b.c').filter(function(i, $elem){ 
    return $elem.attr("class").split(' ').length == 3; 
}) 

Più in generale:

function exactClass(classList) { 
    return $(classList.join('.')).filter(function(i, $elem){ 
    return $elem.attr("class").split(' ').length == classList.length; 
    }); 
} 

Answer 3

Ho cercato qualcosa di simile qualche tempo fa, ma non ero in grado di indovinare quali classi non ho bisogno (dato che sono state aggiunte dinamicamente). Quindi, invece di escludere classi indesiderate con not(), l'ho fatto per abbinare gli elementi con solo le classi che conosco.

var classes = ['a','c','b']; 
 

 
$('.'+classes.join('.')).each(function(){ 
 
    var cl = $(this).attr('class'); 
 
    for(var i in classes) { 
 
    cl = cl.split(classes[i]).join(''); 
 
    } 
 
    if(cl.replace(/\s+/, '') === ''){ 
 
    $(this).addClass('blah'); 
 
    } 
 
});

.blah{ 
 
    font-size:30px; 
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="a b c d">Foo</div> 
 
<div class="c b a">Bar</div> 
 
<div class=" a b c">Hello</div> 
 
<div class=" a b">World</div>

JSFiddle.Come metodo:

function el(c){ 
    var a = []; 
    $('.'+c.join('.')).each(function(){ 
     var k = $(this).attr('class'); 
     for(var i in c) k=k.split(c[i]).join(''); 
     if(k.replace(/\s+/,'')==='') a.push(this); 
    }); 
    return a; 
} 

// usage: 
$(el(['a','c','b'])).addClass('blah');