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 Fiddle

Answer 3

没有jQuery：

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

使用jQuery：

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

这两项都只会让直接的孩子回归。

Answer 4

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

JSFiddle

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

Answer 5

要计算所有后代元素，包括普通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 6

使用jQuery，您可以这样做：

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

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

Answer 7

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

<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 8

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

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

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

计算div中的元素数量

8 个答案: