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

Question

我正在动态地将 UL 元素添加到 DIV 元素。我希望能够计算 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 解决方案可以计算 UL 的数量，以便我可以做这样的事情..？

if(ulcount == 0){

var remove = document.getElementById("000");
remove.innerHTML = '';
results.parentNode.removeChild("000");

}

谢谢。

Answer 1

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

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

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

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

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

将其绑定到一个事件，以便在您想要更新数字时调用它。

Answer 2

代码：

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

Answer 3

试试这个：

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