计算div中的元素数量

Question

我有一个跨越它的div.有没有办法计算div中有多少元素然后将其作为值给出.例如,div中有5个span,然后它会计算它并提醒5个.在Javascript中请.

谢谢.

Answer 1

如果你想要后代的数量,你可以使用

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

但如果你想要直系孩子的数量,请使用

element.childElementCount

请参阅此处的浏览器支持:http://help.dottoro.com/ljsfamht.php

要么

element.children.length

请参阅此处的浏览器支持:https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Answer 2

您可以使用此功能,它将避免计算TextNodes.你可以选择计算孩子的孩子(即递归)

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

用法:

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

在这里尝试一下: JS小提琴

Answer 3

没有jQuery:

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

使用jQuery:

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

这两种情况都只会让直接的孩子回归