33

我有一个里面有 span 的 div。有没有一种方法可以计算 div 中有多少元素，然后将其作为值给出。例如，一个 div 中有 5 个跨度，然后它会计算它并警告 5 个。请在 Javascript 中。

谢谢你。

4

8 回答 8

41

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

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

于 2012-09-02T16:22:14.507 回答
25

您可以使用此功能，它将避免计算 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 Fiddle

于 2012-09-02T16:15:07.983 回答
7

没有 jQuery：

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

使用 jQuery：

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

这两个都只返回直系子级。

于 2012-09-02T16:13:38.667 回答
3

使用 jQuery；仅检查 div 内的跨度：

JSFiddle

$(function(){
    var numberOfSpans = $('#myDiv').children('span').length;
    alert(numberOfSpans);
})();​
于 2012-09-02T16:16:39.360 回答
3

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

<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
于 2019-10-01T02:34:05.420 回答
2

使用 jQuery，您可以这样做：

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

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

于 2012-09-02T16:12:00.420 回答
2

要计算所有后代元素，包括纯 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);
}
于 2012-09-02T16:24:13.810 回答
2

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

alert(document.querySelectorAll("div span").length)
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

于 2020-12-27T14:24:35.283 回答