Compter les éléments div enfants immédiats à l'aide de jQuery

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

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

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

$("#foo > div").length

Direct les enfants de l'élément avec l'id 'foo' qui sont des divs Récupérer ensuite la taille de l'ensemble enveloppé produit.

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

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

En passant, 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 cela ne fait pas beaucoup de différence (résultat: l' lengthutilisation est légèrement plus rapide (2%) que size())

[Mise à jour] En raison du balisage incorrect vu dans l'OP (avant « balisage Validé » mise à jour par moi), à la fois $("#foo > div").lengthet $('#foo').children().lengthdonné le même ( jsFiddle ). Mais pour que la réponse correcte n'obtienne QUE des enfants `` div '', on DEVRAIT utiliser le sélecteur d'enfants pour des performances correctes et meilleures

$("#foo > div") 

sélectionne tous les div 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 renverront le même résultat

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

En réponse à la réponse de mrCoders en utilisant jsperf, pourquoi ne pas simplement utiliser le nœud 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 46095 op / s tandis que les autres méthodes au mieux 2000 op / s

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

$("#foo > div").length

jQuery a une fonction .size () qui retournera le nombre de fois où un élément apparaît mais, comme spécifié dans la documentation jQuery, il est plus lent et renvoie la même valeur que la propriété .length, il est donc préférable d'utiliser simplement le. propriété de longueur. De là: 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>

Avec la version la plus récente de jquery, vous pouvez utiliser $("#superpics div").children().length.

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

ou

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

Comme cela a déjà été dit, les deux renvoient le même résultat.
Mais la fonction size () est plus jQuery "PC".
J'ai eu un problème similaire avec ma page.
Pour l'instant, omettez simplement le> et cela devrait fonctionner correctement.

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

Essayez ceci pour les éléments enfants immédiats de type div

$("#foo > div")[0].children.length