/ / Získajte, aby všetky prvky obsahovali alebo neobsahovali určitú triedu - javascript, jquery

Získajte všetky prvok obsahovať alebo nie niektoré triedy - javascript, jquery

Mám štruktúru html ako

<div class="dv a">a</div>
<div class="dv a">a1</div>
<div class="dv b">b</div>
<div class="dv b">b1</div>
<div class="dv c">c</div>
<div class="dv c">c1</div>
<div class="dv d">d</div>
<div class="dv d">d1</div>

Ako môžem získať všetky prvky obsahujúce triedu a alebo b alebo c

$(".dv").each(function(){}); /// ? how to get

A ako získať všetky prvky neobsahujúce triedu a alebo b

$(".dv:not(.a|.b)").each(function() {}); // ?how to get

odpovede:

2 pre odpoveď č. 1

Na jQuery záleží na tom, že môže využiť vaše zručnosti v CSS za predpokladu, že je prehľadávač aktuálny. Ak je, potom to urobia nasledujúce čisté selektory CSS:

.dv.a, .dv.b, .dv.c {           /*  Matching Ones: */

}

.dv:not(.a):not(.b):not(.c) {   /*  Non Matching Ones: */

}

Ilustruje to nasledujúci úryvok:

.dv.a, .dv.b, .dv.c {
color: red;
}

.dv:not(.a):not(.b):not(.c) {
border: thin solid green;
}
<div class="dv a">a</div>
<div class="dv a">a1</div>
<div class="dv b">b</div>
<div class="dv b">b1</div>
<div class="dv c">c</div>
<div class="dv c">c1</div>
<div class="dv d">d</div>
<div class="dv d">d1</div>


5 pre odpoveď № 2

Na výber pomocou or logika:

$( ".a, .b, .c" )

Na výber pomocou not logika:

$( "div:not(.a, .b)" )

Výber všetkých .dv ale bez .d:

$( ".dv:not(.d)" )

Tu je úryvok, ktorý počíta všetky logiky s vyššie uvedenými selektormi:

var orCount = $( ".a, .b, .c" ).length;
var andCount = $( "div:not(.a, .b)" ).length;
var notdCount = $( ".dv:not(.d)" ).length;

console.log("or logic count = " + orCount);
console.log("and logic count = " + andCount);
console.log("not d logic count = " + notdCount);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dv a">a</div>
<div class="dv a">a1</div>
<div class="dv b">b</div>
<div class="dv b">b1</div>
<div class="dv c">c</div>
<div class="dv c">c1</div>
<div class="dv d">d</div>
<div class="dv d">d1</div>