Javascript Girl
  1. Javascript Girl
  3. Comptez le nombre d'éléments dans un div
Intereting Posts
Mettez des citations autour d'une chaîne variable en JavaScript La fonction jQuery ne se lie pas aux nouveaux éléments dom Objet passant par Javascript pour fonctionner Comment soumettre un formulaire chargé sur le popover bootstrap Un site peut-il REQUIRE Javascript et être toujours conforme à l'article 508? Passer les arguments vers une autre fonction javascript Déclenchez l'événement de clic de fichier d'entrée dans AngularJS AJAX Div Retrieval toutes les 60 secondes Comment télécharger des fichiers – sails.js L'alerte ne fonctionne pas dans la fenêtre pop-up dans l'extension chrome Récupérer toutes les variables globales (javascript) dans une page ImageUtils.loadTexture avec rappel dans Canvas Renderer Puis-je envoyer un courrier électronique en utilisant javascript Utilisation de Angular2 TestBed pour modérer un service avec un paramètre d'interface de classe non concret Javascript – crée des liens de clés d'attributs JSON au premier niveau

Comptez le nombre d'éléments dans un div

J'ai un div avec une portée à l'intérieur de celui-ci. Existe-t-il un moyen de compter le nombre d'éléments dans un div puis de le donner comme valeur. Par exemple, il y avait 5 span dans un div, puis il le comptait et alerte cinq. En Javascript s'il vous plaît.

Je vous remercie.

Vous pouvez utiliser cette fonction, elle évitera de compter TextNodes. Vous pouvez choisir de compter les enfants des enfants (c.-à-d. Récursifs) 

function getCount(parent, getChildrensChildren){ var relevantChildren = 0; var children = parent.childNodes.length; for(var i=0; i < children; i++){ if(parent.childNodes[i].nodeType != 3){ if(getChildrensChildren) relevantChildren += getCount(parent.childNodes[i],true); relevantChildren++; } } return relevantChildren; }

Usage: 

 var element = document.getElementById("someElement"); alert(getCount(element, false)); // Simply one level alert(getCount(element, true)); // Get all child node count

Essayez-le ici: JS Fiddle

Si vous voulez le nombre de descendants, vous pouvez utiliser 

 var element = document.getElementById("theElementId"); var numberOfChildren = element.getElementsByTagName('*').length

Mais si vous voulez le nombre d'enfants immédiats, utilisez 

 element.childElementCount

Consultez le support du navigateur ici: http://help.dottoro.com/ljsfamht.php

ou 

 element.children.length

Consultez le support du navigateur ici: https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Sans jQuery: 

 var element = document.getElementById("theElementId"); var numberOfChildren = element.children.length

Avec jQuery: 

 var $element = $(cssSelectocr); var numberOfChildren = $element.children().length;

Ces deux rapports ne sont que des enfants immédiats.

Avec jQuery; Vérifie uniquement les travées à l'intérieur d'un div:

JSFiddle 

 $(function(){ var numberOfSpans = $('#myDiv').children('span').length; alert(numberOfSpans); })();​

Avec jQuery, vous pouvez faire comme ceci: 

 var count = $('div').children().length; alert( count );​​​

Voici un violon: http://jsfiddle.net/dryYq/1/

Pour compter tous les éléments descendants, y compris les éléments imbriqués en javascript, il existe plusieurs options:

Le plus simple est probablement ceci: 

 var count = parentElement.getElementsByTagName("*").length;

Si vous vouliez la liberté d'ajouter plus de logique autour de ce que vous comptez, vous pouvez vous retrouver dans l'arbre local comme ceci: 

 function countDescendantElements(parent) { var node = parent.firstChild, cnt = 0; while (node) { if (node.nodeType === 1) { cnt++; cnt += countDescendantElements(node); } node = node.nextSibling; } return(cnt); }

Démonstration de travail: http://jsfiddle.net/jfriend00/kD73F/

Si vous vouliez simplement compter les enfants directs (pas des niveaux plus profonds) et ne voulaient que compter les noeuds d'éléments (pas de noeud de texte ou de commentaire) et souhaitaient un large support de navigateur, vous pouvez le faire: 

 function countChildElements(parent) { var children = parent.childNodes, cnt = 0; for (var i = 0, len = children.length; i < len; i++) { if (children[i].nodeType === 1) { ++cnt; } } return(cnt); }