jQuery Selector: Auswählen einer bestimmten Kombination von Klassen, wenn mehrere existieren

Question

Ich habe versucht, einige Nachforschungen bereits und habe nichts gefunden, aber wenn ich die Antwort verpasst habe, bitte sagen Sie mir. Grundsätzlich habe ich mehrere Elemente mit jeweils mehreren Klassen, aber die Kombinationen sind einzigartig. Ich möchte eine bestimmte Kombination von Klassen auswählen, aber keine anderen Elemente, die diese Elemente in Kombination mit anderen enthalten.

Ich würde gerne wissen, ob dieser Selektor in jQuery existiert oder ob es eine andere Möglichkeit gibt, das zu erreichen, was ich erkläre. Siehe nachstehendes Beispiel:

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

Beim Versuch, nur das Element mit den Klassen anmelden a b c, ich versuchte, mit:

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

der Ausgang ist:

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

Ich suche die Ausgabe zu sein:

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

Jede Anleitung wird geschätzt. Vielen Dank!

Answer 1

Sie konnten die CSS3 verwenden :not() pseudo class die .d Klasse zu negieren: (example)

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

---

jQuery hat auch ein .not() method: (example)

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

---

Sie auch das Attribut verwenden könnte Selektor: (example)

[class="a b c"] 

Beachten Sie, dass die Reihenfolge immer a b c sein muss. Ich werfe das einfach als Option raus.

Answer 2

Ich glaube nicht, dass Sie dies mit geraden CSS-Selektoren tun können, kurz gesagt: nicht jede andere Klasse aufzuzählen, die Sie ausschließen möchten oder eine echte Gymnastik mit [class =]. was Sie können jedoch tun ist, alle Elemente mit den .abc Klassen auswählen und dann alle Elemente herauszufiltern, die mehr als drei Elemente in ihre Klassenliste haben:

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

Allgemeiner:

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

Answer 3

Ich habe vor einiger Zeit nach etwas ähnlichem gesucht, aber ich konnte nicht erraten, welche Klassen ich nicht brauche (da sie dynamisch angehängt wurden). Also, anstatt unerwünschte Klassen mit not() auszuschließen, habe ich dies gemacht, um Elemente mit nur Klassen zu verbinden, die ich kenne.

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.Als Methode:

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