cómo contar el número total de divs dentro de otro div usando javascript

Question

¿Cómo contar el número total de elementos div que están contenidos en otro div usando javascript?

Answer 1

El getElementsByTagName() no es solo un método document, sino uno que se puede ejecutar en cualquier elemento DOM.

elemento. getElementsByTagName es similar a documento. getElementsByTagName, excepto que su búsqueda se restringe a aquellos elementos que son descendientes del elemento especificado

ver más en https://developer.mozilla.org/en/DOM/element.getElementsByTagName

---

Así que el código real que hace lo que pide es

var container_div = document.getElementById('id_of_container_div'); 
var count = top_level_div.getElementsByTagName('div').length; 

Answer 2

Hay muchas maneras de t elemento divs usando jquery.

Pero forma más popular y sencilla son:

$(document).ready(function(){ 
    var divCount = $("div").size(); 
    alert(divCount); 
}); 

Y

$(document).ready(function(){ 
    var divCount = $("div").length; 
    alert(divCount); 
}); 

Su útil para usted

Answer 3

Puede utilizar @ Gist mano de davidcmoulton: https://gist.github.com/davidcmoulton/a76949a5f35375cfbc24

I encontrar bastante útil que no lo hace solo cuenta los DIV pero también enumera el recuento de todos los tipos de elementos de tu página.

Aquí está una copia de la Síntesis para mayor referencia:

(function (window, undefined) { 
// Counts all DOM elements by name & logs resulting object to console. 
var forEach = Array.prototype.forEach, 
counter = {}, 

incrementElementCount = function (elementName) { 
    if (counter.hasOwnProperty(elementName)) { 
    counter[elementName] += 1; 
    } else { 
    counter[elementName] = 1; 
    } 
}, 

processNode = function (node) { 
    var currentNode = node; 
    if (currentNode.nodeType === currentNode.ELEMENT_NODE) { 
    incrementElementCount(currentNode.nodeName); 
    if (currentNode.hasChildNodes) { 
     forEach.call(currentNode.childNodes, function (childNode) { 
     if (childNode.nodeType === currentNode.ELEMENT_NODE) { 
      processNode(childNode); 
     } 
     }); 
    } 
    } 
}; 

processNode(window.document.firstElementChild); 

console.log(counter); 

}(this));