Cuenta cuántos elementos en un div

Question

Tengo un div con un lapso dentro de él. ¿Hay una manera de contar cuántos elementos en un div luego lo da como un valor. Por ejemplo, hubo 5 span en un div, entonces lo contaría y alertaría a cinco. En Javascript por favor.

Gracias.

Answer 1

Puede utilizar esta función, evitará contar los TextNodes. Puede elegir contar los hijos de los niños (es decir,recursivo)

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; 
} 

Uso:

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

Pruébalo aquí: JS Fiddle

Answer 2

Con jQuery se puede hacer así:

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

Aquí hay un violín: http://jsfiddle.net/dryYq/1/

Answer 3

Sin jQuery:

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

con jQuery:

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

Ambos th es devolver solo hijos inmediatos.

Answer 4

con jQuery; Los cheques sólo para luces dentro de un div:

JSFiddle

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

Answer 5

Si desea que el número de descendientes, puede utilizar

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

Pero si desea que el número de hijos inmediatos, utilice

element.childElementCount 

Ver el soporte del navegador aquí: http://help.dottoro.com/ljsfamht.php

o

element.children.length 

Véase el apoyo del navegador aquí: https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Answer 6

Para contar todos los elementos descendientes incluyendo elementos anidados en JavaScript llanura, hay varias opciones:

La más sencilla es probablemente la siguiente:

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

Si desea la libertad de publicidad d más lógica alrededor de lo que se cuenta, puede recursivo a través del árbol local como esto:

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

Demostración de Trabajo: http://jsfiddle.net/jfriend00/kD73F/

si sólo quería contar hijos directos (niveles no profundas) y sólo quería contar con nodos de elemento (no un texto o comentario nodos) y quería el apoyo del navegador de ancho, usted puede hacer esto:

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); 
}