Count inmediatos elementos div niño utilizando jQuery

Question

que tiene la siguiente estructura de nodos HTML:

<div id="foo"> 
    <div id="bar"></div> 
    <div id="baz"> 
    <div id="biz"></div> 
    </div> 
    <span></span> 
</div> 

¿Cómo calculo el número de hijos inmediatos de foo, que son de tipo div? En el ejemplo anterior, el resultado debería ser dos (bar y baz).

Answer 1

$("#foo > div").length 

Hijos directos del elemento con el id 'foo' que son divs. A continuación, recupera el tamaño del conjunto envuelto producido.

Answer 2

$('#foo > div').size() 

Answer 3

$("#foo > div") 

selecciona todos los divs que son descendientes inmediatos de #foo
una vez que tenga el conjunto de los niños se puede utilizar la función de tamaño:

$("#foo > div").size() 

o puede utilizar

$("#foo > div").length 

Ambos le devolverán el mismo resultado

Answer 4

var n_numTabs = $("#superpics div").size(); 

o

var n_numTabs = $("#superpics div").length; 

---

Como ya se ha dicho, ambos devuelven el mismo resultado.
Pero la función size() es más jQuery "P.C".
Tuve un problema similar con mi página.
Por el momento, solo omita el> y debería funcionar bien.

Answer 5

$("#foo > div").length 

jQuery tiene una función .size() que devolverá el número de veces que aparece un elemento, pero, como se especifica en la documentación de jQuery, es más lento y devuelve el mismo valor que la propiedad por lo que .length es mejor simplemente usar la propiedad .length. Desde aquí : http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 6

$("div", "#superpics").size(); 

Answer 7

recomiendo el uso de $('#foo').children().size() para un mejor rendimiento.

He creado una prueba jsperf para ver la diferencia de velocidad y el método children() batido el selector de hijo (#foo> div) Enfoque por lo menos el 60% en Chrome (canario acumulación v15) 20-30% en Firefox (v4).

Por cierto, no hace falta decir que estos dos enfoques producen los mismos resultados (en este caso, 1000).

[Actualización] He actualizado la prueba para incluir el tamaño() vs prueba de longitud, y ellos no lo convierte diferencia mucho (resultado: length uso es ligeramente más rápida (2%) que size())

[Actualizar] Debido al marcado incorrecto visto en el OP (antes de la actualización 'marcado validada' por mí), ambos $("#foo > div").length & $('#foo').children().length resultaron lo mismo (jsfiddle). Pero para la respuesta correcta para obtener SOLO 'div' hijos, uno debe usar selector de hijo para el correcto & mejor rendimiento

Answer 8

En respuesta a mrCoders respuesta usando jsperf ¿por qué no usar el nodo DOM?

var $foo = $('#foo'); 
var count = $foo[0].childElementCount 

Usted puede tratar de la prueba aquí: http://jsperf.com/jquery-child-ele-size/7

Este método obtiene 46.095 op/s, mientras que los otros métodos en el mejor de 2000 op/s

Answer 9

Con la versión más reciente de jQuery, que pueda use $("#superpics div").children().length.

Answer 10

var divss = 0; 
$(function(){ 
    $("#foo div").each(function(){ 
    divss++; 

    }); 
    console.log(divss); 
});  
<div id="foo"> 
    <div id="bar" class="1"></div> 
    <div id="baz" class="1"></div> 
    <div id="bam" class="1"></div> 
</div> 

Answer 11

$('#foo').children('div').length