Question

我正在向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解决方案来计算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;

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

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

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

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

3 个答案: