Compter les éléments div enfants immédiats en utilisant jQuery

Question

J'ai la structure de nœuds HTML suivante :

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

Comment puis-je compter le nombre d'enfants immédiats de foo qui sont de type div ? Dans l'exemple ci-dessus, le résultat devrait être deux ( bar et baz ).

Answer 1

$("#foo > div").length

Enfants directs de l'élément avec l'id 'foo' qui sont des divs. Puis récupération de la taille de l'ensemble enveloppé produit.

Answer 2

Je recommande d'utiliser $('#foo').children().size() pour de meilleures performances.

J'ai créé un jsperf pour voir la différence de vitesse et la children() bat l'approche du sélecteur enfant (#foo > div) par au moins 60% dans Chrome (canary build v15) 20-30% dans Firefox (v4).

D'ailleurs, il va sans dire que ces deux approches produisent les mêmes résultats (dans ce cas, 1000).

[Mise à jour] J'ai mis à jour le test pour inclure le test size() vs length, et ils ne font pas beaucoup de différence (résultat : length est légèrement plus rapide (2 %) que l'utilisation de size() )

[Mise à jour] En raison d'un balisage incorrect vu dans le PO (avant la mise à jour du 'balisage validé' par moi), les deux $("#foo > div").length & $('#foo').children().length a donné le même résultat ( jsfiddle ). Mais pour obtenir une réponse correcte et obtenir UNIQUEMENT les enfants 'div', il faut utiliser le sélecteur d'enfant pour des performances correctes et meilleures.

Answer 3

$("#foo > div") 

sélectionne tous les divs qui sont des descendants immédiats de #foo
une fois que vous avez l'ensemble des enfants, vous pouvez soit utiliser la fonction de taille :

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

ou vous pouvez utiliser

$("#foo > div").length

Les deux vous donneront le même résultat

Answer 4

En réponse à la réponse de mrCoders utilisant jsperf, pourquoi ne pas simplement utiliser le noeud dom ?

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

Vous pouvez essayer le test ici : http://jsperf.com/jquery-child-ele-size/7

Cette méthode obtient 46 095 op/s alors que les autres méthodes obtiennent au mieux 2000 op/s.

Answer 5

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