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, 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 divs. Récupérer ensuite la taille du jeu emballé produit.

Answer 2

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 méthode children() a battu l'approche du sélecteur enfant (#foo> div) d'au moins 60% dans Chrome (version canary v15) 20-30% dans Firefox (v4 ).

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 pour inclure le test size () vs test de longueur, et ils ne font pas une grande différence (résultat: length l'utilisation est légèrement plus rapide (2%) que size().)

[Mise à jour] En raison du balisage incorrect observé dans l'OP (avant la mise à jour par moi du balisage validé), les deux $("#foo > div").length & $('#foo').children().length ont le même résultat ( jsfiddle ). Mais pour obtenir la réponse correcte UNIQUEMENT aux enfants 'div', on DEVRAIT utiliser le sélecteur d’enfant pour une performance correcte et meilleure .

Answer 3

$("#foo > div") 

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

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

ou vous pouvez utiliser

$("#foo > div").length

Les deux vont vous retourner le même résultat

Answer 4

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

Answer 5

En réponse à la réponse de mrCoders utilisant 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 de jQuery, elle est plus lente 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. À partir d'ici: 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();

o

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

---

Comme on l'a déjà 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();