Question

我在JS中有一个要求，我想获得具有相同内部值的li元素的计数。最好的方法是什么？我知道我们可以使用find和contains轻松地在Jquery中实现这一点，但我不想使用jquery。

我希望li元素的长度具有相同的值。

对于Eg：我想知道有多少LI的值为'A'。

下面是我试过的JS，我觉得这不是最好的cos，如果我说大约10,000 LI然后我将不得不循环所有元素得到他们的价值并检查它是否我想要或不，肯定会达到性能。

注意：LI元素在运行时添加了它们的值。

HTML

<ul class="s_1" id="ULE">
    <li class="r1">A</li>
    <li class="r1">A</li>    
    <li class="r1">B</li>
    <li class="r1">A</li>  
</ul>

JS

var LI = document.getElementsByClassName('r1');
var cnt = 0;
for(var i=0;i<LI.length;i+=1){
    if(LI[i].innerHTML == 'A'){
        cnt += 1;
    }
}

if(cnt === 4) 
      alert('working good!!');

JS Fiddle

Answer 1

我认为没有更好的方法来改善效果。如果您只使用DOM（例如，如果数据来自用户输入），而不是您从中创建数据的基础数据结构，那么AFAICT没有其他结构可以收集所有元素而不是数组 - 类型结构，然后需要O（n）时间来检查每个元素。

而不是计数目标，因此取决于列表元素的数量，而是尝试使用函数来处理数据，这在某种程度上增加了方便性：

function isEveryElementEqual(nodeList) {
    val = nodeList[0].innerHTML;
    for (var i=1; i<nodeList.length; i++) {
        if (nodeList[i].innerHTML !== val) return false;
    }
    return true;
}

var LI = document.getElementsByClassName('r1');

console.log(isEveryElementEqual(LI)); // Returns false with the above HTML

Answer 2

您不必搜索文档中的所有<li>。 getElementsByClassName可以应用于元素，然后只在该元素中搜索。所以你可以这样做：

var LI = document.getElementById('ULE').getElementsByClassName('r1');

DEMO

您还可以使用querySelectorAll：

简化此操作

var LI = docuement.querySelectorAll('#ULE .r1');

获取具有指定值的JS中的元素计数（无JQUERY）

2 个答案: