2012-01-15 24 views
7

Necesito verificar si un elemento contiene cierta clase secundaria usando JQUERY.¿Cómo puedo saber si un elemento contiene una clase específica?

me trataron:

if ($('#myElement').has('.myClass')) { 
    do work son 
} 

no funcionó.

Mi código html se presenta así:

<div id="myElement"> 
    <img> 
    <span>something</span> 
    <span class="myClass">Hello</span> 
</div> 
+3

'document.getElementById ("myElement") getElementsByClassName ("myClass") length' – Raynos

+0

@Raynos:.. Ja ... demasiado javascript. : P – naveen

Respuesta

7

La forma más sencilla sería la de buscar .myClass como un hijo de #myElement:

if($('#myElement .myClass')).length > 0) 

Si sólo desea primeros niños de nivel, tendrá que utilizar >

if($('#myElement > .myClass')).length > 0) 

Otra forma sería pasar un selector para find y la comprobación de los resultados:

if($('#myElement').find('.myClass').length > 0) 

o sólo para los niños de primer nivel:

if($('#myElement').children('.myClass').length > 0) 
+2

él quiere niños – Raynos

+0

Eso no funciona:/No creo que verifique los elementos secundarios, solo el elemento dado. –

+0

+1: como 0 es falso, podría omitir '> 0' – naveen

3

sólo tiene que utilizar QS

var hasClass = document.getElementById("myElement").querySelector(".myClass");

o podría recurse sobre los niños

var element = document.getElementById("myElement"); 

var hasClass = recursivelyWalk(element.childNodes, function hasClass(node) { 
    return node.classList.contains("myClass"); 
}); 

function recursivelyWalk(nodes, cb) { 
    for (var i = 0, len = nodes.length; i < len; i++) { 
     var node = nodes[i]; 
     var ret = cb(node); 
     if (ret) { 
      return ret; 
     } 
     if (node.childNodes && node.childNodes.length) { 
      var ret = recursivelyWalk(node.childNodes, cb); 
      if (ret) { 
       return ret; 
      } 
     } 
    } 
} 

Usando recursivelyWalk y .classList (que se puede calzar).

Alternativamente, puede utilizar jQuery

$("#myElement .myClass").hasClass("myClass");

o si desea que las operaciones compuestas sin jQuery luego tratar NodeComposite

NodeComposite.$("#myElement *").classList.contains("myClass");

+0

por qué no usó getelementsbyclassname según su comentario? ¿es decir? – naveen

+0

@naveen querySelector es más corto :) – Raynos

3

Probar:

if($('#myElement').children('.myClass').length) { 
    // Do what you need to 
} 

El objeto jQuery devuelve una matriz, que tiene la propiedad .length. El código anterior comprueba si hay .myClass niños en #myElement y, si los hay (cuando .length no es 0), ejecuta el código dentro de la instrucción if().

Aquí hay una versión más explícito:

if($('#myElement').children('.myClass').length > 0) { 
    // Do what you need to 
} 

Siempre se puede utilizar $('#myElement .myClass').length también, pero $.children() es más claro para algunos. Para encontrar elementos que no son niños directos, utilice $.find() en lugar de $.children().

+0

Esto funcionó perfectamente, gracias. –

1
if($.contains($('#myElement'), $('.myClass'))){ 
    alert("True"); 
} 
else{alert("False")}; 
+1

Usando '$ ('# myElement'). Children ('. MyClass'). Length' es más claro y más obvio en su significado, además de ser menos complejo y posiblemente un poco más rápido. – Bojangles

Cuestiones relacionadas