enfant Count éléments div immédiats en utilisant jQuery

Question

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

<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 divs. Puis, récupérer la taille de l'ensemble emballé produit.

Answer 2

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

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 utiliser la fonction de la taille:

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

ou vous pouvez utiliser

$("#foo > div").length 

Les deux vous renverront le même résultat

Answer 4

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

ou

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

---

Comme nous l'avons déjà dit, à la fois 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, il suffit d'omettre le> et cela devrait fonctionner correctement.

Answer 5

$("#foo > div").length 

jQuery a une fonction .Size() qui renvoie le nombre de fois qu'un élément apparaît, mais, comme indiqué dans la documentation jQuery, elle est plus lente et retourne la même valeur que la propriété .length de sorte qu'il est préférable d'utiliser simplement la propriété .length. De là: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 6

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

Answer 7

Je recommande d'utiliser $('#foo').children().size() pour une meilleure performance.

J'ai créé un test jsperf pour voir la différence de vitesse et la méthode children() battu le sélecteur d'enfant (#foo> div) approche d'au moins 60% dans Chrome (canari construction v15) 20-30% dans Firefox (v4). Par 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 d'inclure la taille() vs test de longueur, et ils ne fait pas beaucoup de différence (résultat: l'utilisation length est légèrement plus rapide (2%) que size())

[Mise à jour] En raison du balisage incorrect vu dans l'OP (avant la mise à jour 'markup validated' par moi), les deux $("#foo > div").length & $('#foo').children().length ont abouti le même (jsfiddle). Mais pour la réponse correcte pour obtenir seulement « div » enfants, il faut utiliser sélecteur d'enfant pour une meilleure performance correcte &

Answer 8

En réponse à mrCoders répondre à l'aide 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 est 46095 op/s tandis que les autres méthodes, au mieux 2000 op/s

Answer 9

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

Answer 10

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 11

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