Compter les éléments div enfant immédiats avec jQuery

Question

J'ai la structure de noeud 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 ( bar et baz ).

Answer 1

$("#foo > div").length

Dirigez les enfants de l'élément avec l'id 'foo' qui sont div. Récupérer ensuite la taille du jeu emballé produit.

Answer 2

Je recommande d'utiliser $ ('# foo'). children (). size () pour améliorer les performances.

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

À propos, il va sans dire que ces deux approches produisent les mêmes résultats (dans le cas présent, 1000).

[Mise à jour] J'ai mis à jour le test afin d'inclure le test size () vs le test de longueur. Ils ne font pas grande différence (résultat: l'utilisation de length est légèrement plus rapide (2%) que taille () )

[Mise à jour] En raison du balisage incorrect observé dans l'OP (avant la mise à jour par moi du "balisage validé"), $ (" #foo > div "). length & amp; $ ('# foo'). children (). length a eu le même résultat ( jsfiddle ). Mais pour que la réponse correcte obtienne SEULEMENT les enfants 'div', on DEVRAIT utiliser le sélecteur d’enfant pour corriger & amp; de meilleures performances

Answer 3

$("#foo > div") 

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

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

ou vous pouvez utiliser

$("#foo > div").length

Les deux vous renverront le même résultat

Answer 4

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

Answer 5

En réponse à la réponse de mrCoders qui utilise jsperf, pourquoi ne pas utiliser simplement 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 46 095 op / s tandis que les autres méthodes fonctionnent, au mieux, 2000 op / s

Answer 6

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

Answer 7

$("#foo > div").length

jQuery a une fonction .size () qui renvoie le nombre de fois qu’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 de simplement utilisez la propriété .length. 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();

ou

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

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

Answer 10

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

Answer 11

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