Contar elementos div inmediatos del niño usando jQuery
-
05-07-2019 - |
Pregunta
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
).
Solución
$("#foo > div").length
Hijos directos del elemento con el id 'foo' que son divs. Luego recupera el tamaño del conjunto envuelto producido.
Otros consejos
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
$("#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
$('#foo').children('div').length
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
$('#foo > div').size()
$("#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 /
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>
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.
Con la versión más reciente de jquery, puedes usar $ (" #superpics div "). children (). length
.
$("div", "#superpics").size();