/ / Obtener todo el elemento contiene o no alguna clase - javascript, jquery

Obtener todo el elemento contiene o no alguna clase - javascript, jquery

Tengo estructura html como

<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>

¿Cómo puedo obtener todos los elementos que contienen una clase b o c

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

Y como obtener todo el elemento no contiene una clase b

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

Respuestas

2 para la respuesta № 1

Lo que pasa con jQuery es que puede aprovechar tus habilidades en CSS, siempre que el navegador esté actualizado. Si es así, entonces los siguientes selectores de CSS puros harán el trabajo:

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

}

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

}

El siguiente fragmento ilustrará esto:

.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 para la respuesta № 2

Para seleccionar con or lógica:

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

Para seleccionar con not lógica:

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

Para seleccionar todo .dv pero sin .d:

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

Aquí hay un fragmento que cuenta todas las lógicas con los selectores de arriba:

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>