Contar elementos div inmediatos del niño usando jQuery

Question

Tengo la siguiente estructura de nodo HTML:

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

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

Answer 1

$("#foo > div").length

Hijos directos del elemento con el id 'foo' que son divs. Luego recupera el tamaño del conjunto envuelto producido.

Answer 2

Recomiendo usar $ ('# foo'). children (). size () para un mejor rendimiento.

He creado una prueba de jsperf para ver la diferencia de velocidad y los children () < El método / código> venció el enfoque del selector de niños (#foo > div) al menos 60% en Chrome (versión canaria 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 () frente a la prueba de longitud, y no hacen mucha diferencia (resultado: longitud el uso es ligeramente más rápido (2%) que size () )

[Actualización] Debido al marcado incorrecto visto en el OP (antes de la actualización de 'validación de marcado' por mi parte), tanto $ (" #foo > div "). length &erio; $ ('# foo'). children (). length resultó igual ( jsfiddle ). Pero para que la respuesta correcta obtenga SOLO hijos 'div', uno DEBERÍA usar el selector de niños para corregir & amp; mejor rendimiento

Answer 3

$("#foo > div") 

selecciona todos los divs que son descendientes inmediatos de #foo
una vez que tenga el conjunto de hijos, puede usar la función de tamaño:

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

o puedes usar

$("#foo > div").length

Ambos te devolverán el mismo resultado

Answer 4

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

Answer 5

En respuesta a la respuesta de mrCoders usando jsperf, ¿por qué no usar simplemente el nodo dom?

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

Puede probar la prueba aquí: http://jsperf.com/jquery-child -el tamaño / 7

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

Answer 6

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

Answer 7

$("#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 lenta y devuelve el mismo valor que la propiedad .length, por lo que es mejor simplemente usar la propiedad .length. Desde aquí: http://www.electrictoolbox.com/get-total -number-matched-elements-jquery /

Answer 8

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 9

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

o

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

---

Como ya se dijo, ambos devuelven el mismo resultado.
Pero la función size () es más jQuery " P.C " ;.
Tuve un problema similar con mi página.
De ahora en adelante, simplemente omita el > y debería funcionar bien.

Answer 10

Con la versión más reciente de jquery, puedes usar $ (" #superpics div "). children (). length .

Answer 11

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