selektor jQuery: Wybór pewnej kombinacji klas, gdy istnieje wiele istnień.

Question

Próbowałem już wykonać pewne badania i nie znalazłem nic, ale jeśli przegapiłem odpowiedź, proszę powiedz mi. Zasadniczo mam wiele elementów z wieloma klasami, ale kombinacje są unikalne. Chcę wybrać pewną kombinację klas, ale nie inne elementy, które mają te elementy w połączeniu z innymi.

Chciałbym wiedzieć, czy ten selektor istnieje w jQuery, czy jest jakiś inny sposób na wykonanie tego, co wyjaśniam. Patrz poniższy przykład:

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

Podczas próby zalogowania tylko element z klasami a b c, Próbowałem przy użyciu:

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

wyjście jest:

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

szukam wyjście:

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

Wszelkie wskazówki są mile widziane. Dzięki!

Answer 1

Można użyć CSS3 :not() pseudo class negować klasę .d: (example)

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

---

jQuery posiada również .not() method: (example)

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

---

Można również użyć atrybutu selektor: (example)

[class="a b c"] 

Zauważ, że kolejność zawsze musi być a b c. Po prostu wyrzuć to jako opcję.

Answer 2

Nie wierzę, że można to zrobić za pomocą prostych selektorów CSS, bez użycia: nie wyliczać każdej innej klasy, którą chcesz wykluczyć, lub jakiejś prawdziwej gimnastyki z [class =]. Jednak to, co można zrobić, to wybrać wszystkie elementy o .abc klas, a następnie odfiltrować żadnych elementów, które mają więcej niż trzy elementy w ich liście zajęć:

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

Ogólniej:

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

Answer 3

Szukałem czegoś podobnego jakiś czas temu, ale nie byłem w stanie odgadnąć, jakich klas nie potrzebuję (ponieważ zostały one dołączone dynamicznie). Tak więc, zamiast wykluczać niechciane klasy z not(), zrobiłem to, aby dopasować elementy tylko z klasami, które znam.

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.Jako metoda: