javascript - primer - recorrer elementos de un div jquery

Contar los elementos div hijos inmediatos 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 debería ser dos ( bar y baz ).

Answer 1

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

Answer 2

En respuesta a mrCoders, responda usando jsperf, ¿por qué no solo usa el nodo dom?

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

Puede probar 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 3

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

He creado una prueba jsperf para ver la diferencia de velocidad y el método children() derrotó al enfoque selector de niños (#foo> div) al menos un 60% en Chrome (canary build v15) 20-30% en Firefox (v4) .

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

[Actualizar] Actualicé la prueba para incluir el tamaño () frente a la prueba de longitud, y no hacen mucha diferencia (resultado: el uso de la length es ligeramente más rápido (2%) que el size() )

[Actualización] Debido al marcado incorrecto visto en el OP (antes de la actualización ''markup validated''), tanto $("#foo > div").length & $(''#foo'').children().length result lo mismo ( jsfiddle ). Pero para una respuesta correcta para obtener SOLO los niños ''div'', uno DEBE usar el selector de niños para un rendimiento correcto y mejor

Answer 4

$("#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 le devolverán el mismo resultado

Answer 5

$("#foo > div").length

Dirija a los hijos del elemento con el id ''foo'' que son divs. A continuación, recupera el tamaño del conjunto envuelto producido.

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

$(''#foo'').children(''div'').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

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 "PC".
Tuve un problema similar con mi página.
Por ahora, simplemente omita el> y debería funcionar bien.