用Javascript计算一个Div中有多少个UL元素

Count how many UL Elements there are in a Div with Javascript?

本文关键字：多少 元素 UL Div 计算 Javascript 一个      更新时间：2023-09-26

我正在动态地向div元素添加UL元素。我希望能够计算DIV中有多少UL元素，以便一旦所有UL被动态删除，我就可以删除包含它们的DIV。

<div id="000">
<ul id="000-1">
<li>Stuff</li>
<li>Stuff</li>
</ul>
<ul id="000-2">
<li>Stuff</li>
<li>Stuff</li>
</ul>
</div>

是否有一个简单的Javascript解决方案，计算ULs的数量，以便我可以做这样的事情…

?
if(ulcount == 0){
var remove = document.getElementById("000");
remove.innerHTML = '';
results.parentNode.removeChild("000");
}

谢谢。

@Cheeso的答案是一个很好的纯js解决方案。但是，如果您使用jQuery，这个过程可以变得更简单。

jQuery('div#000').children('ul').length;

上面的代码将返回div#000的子ul元素的个数。

要在动态添加元素时更新计数，必须创建一个函数，并在发生变化时调用它来更新计数:

function countUls() {jQuery('div#000').children('ul').length;}

将它绑定到一个事件上，这样当你想要更新号码时它就会被调用。

代码:

    function getDirectChildrenByTagName(elt,tagname) {
        var allChildren = elt.children, wantedChildren=[], i, L;
        tagname = tagname.toUpperCase();
        for(i=0, L=allChildren.length; i<L; i++) {
            if (allChildren[i].tagName.toUpperCase() == tagname) {
                wantedChildren.push(allChildren[i]);
            }
        }
        return wantedChildren;
    }

像这样使用:

var zero = document.getElementById("000");  
var uls = getDirectChildrenByTagName(zero, 'UL');
var ulCount = uls.length;
  ....

试试这个:

var x = document.getElementById("000-1").querySelectorAll("li").length
                  console.log(">>>>", x);
相关文章：