2012-06-25 12 views
5

Estoy luchando con este. Tengo una lista de elementos y en una parte del formulario, cuando algo ha validado, agrega la clase "marcada" al elemento de la lista correspondiente.jQuery contar elementos con clase "marcada"

<ul> 
<li class="title">Checklist</li> 
<li class="checkType checked">Card Type</li> 
<li class="checkNumber checked">Card Number</li> 
<li class="checkName checked">Name on Card</li> 
<li class="checkMonth checked">Expiry Month</li> 
<li class="checkYear checked">Expiry Year</li> 
<li class="checkCode checked">Security Code</li> 
</ul> 

.title{font-size:23px; font-weight:bold;} 
.checked{ color:#f00;} 

pero necesito jQuery para comprobar que cada elemento tiene la clase checked SALVO title.

¿Es esto factible?

Demostración:http://jsfiddle.net/bQtEQ/1/

Gracias a las respuestas que ahora tienen la siguiente

 var counting = $("li.checked:not(.title)").length; 
    if (counting == 6){ 
     console.log(counting); 
    } 
+8

A veces, nos fijamos en la pregunta y se pregunta por qué no hay 10 respuestas ... y esperar un segundo más ... boom! –

+0

posible duplicación de [elementos de conteo de Jquery por clase, ¿cuál es la mejor manera de implementar esto?] (Http://stackoverflow.com/questions/2727303/jquery-counting-elements-by-class-what-is-the-best -way-to-implementation-this) – Esailija

+0

No es un duplicado en absoluto. – Archer

Respuesta

9

Esto es factible con 1 selector simple

$("li.checked:not(.title)").length 

La ventaja aquí, aparte de tener que codificar menos, es que el selector de :not() se tiene en cuenta durante la búsqueda de reducir el conjunto de resultados. Esto significa menos tiempo para jQuery para crear instancias de elementos dom. Esto significa un tiempo de ejecución más rápido, especialmente en navegadores más antiguos.

8

Esto debe darle todas las <li> elementos con la clase '' checked que no tienen la Título de la clase:

$('li.checked').not('.title').length 

Sin embargo, si solo deseaba el Conde de los elementos controladas:

$('.checked').length 

debería ser suficiente.

+0

¿Hay alguna ventaja al hacerlo de esta manera, en lugar de simplemente usar el selector en la respuesta de Ben? – Archer

+0

Agregar el 'li' lo hace más rápido inicialmente, pero filtrar el no después del hecho lo ralentiza. Sería interesante hacer un benchmark seguro. –

+3

@La respuesta de'Archer 'Ben' es mucho más rápida, porque usa [querySelectorAll] (https://developer.mozilla.org/en/DOM/Element.querySelectorAll), que es javascript nativo. – Engineer

1
$('.checked').not('.title').length == $("ul li").length -1 
0
$("li").each(function() { 
    if(!$(this).hasClass("title") && $(this).hasClass("checked")) { 
      alert("hah"); 
    } 
}); 
Cuestiones relacionadas