javascript 计算 HTML 列表中显示元素的数量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18224727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Count the number of displayed elements in a HTML list
提问by Phil
I have a list of list items which are display: none by default. I programmatically change a certain number of them to list-items.
我有一个显示列表项的列表：默认情况下没有。我以编程方式将它们中的一定数量更改为列表项。
I've been trying to use querySelectorAll but when I try:
我一直在尝试使用 querySelectorAll 但当我尝试时：
document.querySelectorAll("#ulname style[display*='list-item']")
it returns an empty array (I know it is at least one).
它返回一个空数组（我知道它至少是一个）。
Ideas on how to modify my selectors or another approach? I would like to know after the fact how many items are displayed.
关于如何修改我的选择器或其他方法的想法？我想知道事后显示了多少项目。
回答by tekagami
var liList = document.getElementById("myul").getElementsByTagName("li");
var largo = liList.length
alert(largo);
WHERE "myul" is the id of the list and largois number of li items
其中“ myul”是列表的id，largo是li项目的数量
<ul id="myul">
<li>hello</li>
<li>world</li>
</ul>
the alert would be 2
警报将是 2
<ul id="myul">
<li>hello</li>
<li>world
<ul>
<li>here we are</li>
<ul>
</li>
</ul>
the alert would be 3
警报将是 3
回答by Roseann Solano
var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
totalLis = liNodes.length;
Adding text to your ul tag
将文本添加到您的 ul 标签
var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);
Adding li tag to your ul tag
将 li 标签添加到您的 ul 标签
var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);
回答by Endi Hariadi
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p>Maybe this answer can help. I improvise for this after a few days of testing. This is what I got. Hope it helps you.</p>
<li class="sidenav-item open active">
<a href="#" class="sidenav-link sidenav-toggle" ></i>
<div class="text-white">Hi, There!
<div class="badge badge-primary" id="ul-me"></div></div>
</a>
<ul class="sidenav-menu" id="ul1">
<li class="sidenav-item active">
<a href="#" class="sidenav-link" >
<div class="text-white" >Home</div>
</a>
</li>
<li class="sidenav-item" id="ul2">
<a href="#" class="sidenav-link" >
<div class="text-white" >Blog</div>
</a>
</li>
<li class="sidenav-item" id="ul3">
<a href="#" class="sidenav-link" >
<div class="text-white" >Downloads</div>
</a>
</li>
<li class="sidenav-item" id="ul4">
<a href="#" class="sidenav-link" >
<div class="text-white" >Contact</div>
</a>
</li>
<li class="sidenav-item" id="ul5">
<a href="#" class="sidenav-link" >
<div class="text-white" >About</div>
</a>
</li>
</ul>
</li>
'''
<!-- Count Item (li) in <ul> -->
<script>
function myFunction() {
var mylist = [document.getElementById("ul1"), ("ul2"), ("ul3"), ("ul4"), ("ul5")];
document.getElementById("ul-me").innerHTML = mylist.length;
}
</script>
</body>
</html>
