计算一个 div 中有多少个元素

Question

我里面有一个带有跨度的div。有没有办法计算div 中有多少元素，然后将其作为值给出。例如，div 中有 5 个跨度，然后它会计算它并发出 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

您可以使用此功能，它将避免计算文本节点。您可以选择计算子项的子项(即递归(

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;

这两个人都只返回直系子女。

Answer 4

我可能会添加愚蠢而简单的一个答案

<div>this is div no. 1</div>
<div>this is div no. 2</div>
<div>this is div no. 3</div>

您可以使用以下方法获取文档中的div 数量：

const divs = document.querySelectorAll('div');
console.log(divs.length) // 3

Answer 5

使用 jQuery，你可以这样做：

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

这里有一个小提琴：http://jsfiddle.net/dryYq/1/

Answer 6

要计算所有后代元素，包括纯 javascript 中的嵌套元素，有几个选项：

最简单的可能是这样的：

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

如果你想自由地围绕你计算的内容添加更多逻辑，你可以像这样通过本地树递归：

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

工作演示：http://jsfiddle.net/jfriend00/kD73F/

如果您只想计算

直接子级(而不是更深层次(，并且只想计算元素节点(不是文本或注释节点(并且想要广泛的浏览器支持，则可以这样做：

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

Answer 7

使用 jQuery;只检查div 内的跨度：

JSFiddle

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

Answer 8

最简单的方法是选择div 内的所有跨度，这将返回一个包含所有跨度的节点列表......然后，您可以像以下示例一样提醒长度。

alert(document.querySelectorAll("div span").length)

<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Answer 9

替代方案：如果您想从浏览器对div 中的元素进行计数，则无需在控制台中编写任何 javascript 代码，因为计数已经显示：

• 火狐：右键单击div 元素并选择"显示 DOM 属性"。然后搜索 childElementCount 和 childNode 来检查您的计数。

• Chrome：只需正常单击div 元素，然后在侧视图窗口(通常显示样式的位置(上选择"属性"选项卡。childElementCount 和 childNode 也将在那里。