Javascript 计算HTML列表中显示的元素数_Javascript_Html_Css_Css Selectors

Javascript 计算HTML列表中显示的元素数

javascript html css

Javascript 计算HTML列表中显示的元素数,javascript,html,css,css-selectors,Javascript,Html,Css,Css Selectors,我有一个显示的列表项列表：默认情况下无。我以编程方式更改了一定数量的列表项我一直在尝试使用querySelectorAll，但尝试时： document.querySelectorAll("#ulname style[display*='list-item']") 它返回一个空数组（我知道它至少是一个）关于如何修改我的选择器或其他方法的想法？我想知道在事实发生后展示了多少物品 var ul = document.getElementById("myul"); var liN

我有一个显示的列表项列表：默认情况下无。我以编程方式更改了一定数量的列表项

我一直在尝试使用querySelectorAll，但尝试时：

document.querySelectorAll("#ulname style[display*='list-item']")

它返回一个空数组（我知道它至少是一个）

关于如何修改我的选择器或其他方法的想法？我想知道在事实发生后展示了多少物品

    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;

将li标签添加到ul标签

var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);

var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);

var txt=“dsgdsgs”；
ul.innerHTML（txt）；

其中“myul”是列表的id，largo是li项的数量

<ul id="myul">
    <li>hello</li>
    <li>world</li>
</ul>


你好
世界

警报将为2

<ul id="myul">
    <li>hello</li>
    <li>world
        <ul>
            <li>here we are</li>
        <ul>
    </li>
</ul>


你好
世界

我们到了

警报将为3


<!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>

也许这个答案会有所帮助。经过几天的测试，我临时准备了这个。这就是我得到的。希望对你有帮助














'''
函数myFunction（）{
var mylist=[document.getElementById（“ul1”）、（“ul2”）、（“ul3”）、（“ul4”）、（“ul5”）；
document.getElementById（“ul me”）.innerHTML=mylist.length；
}

选择器无法按样式属性查询元素。在代码中，您正在查找

ul

元素中的

style

元素，该元素具有

display

属性，该属性包含

'list-item'

。。。在HTML中没有任何意义。您将需要迭代

#ulname

的子节点，并查找

li

元素，这些元素的

style.display==“list item”

。我不清楚这个问题。你到底想做什么？把它们都换了？就其中一些？这行代码只是想确定当前显示的是哪一项吗？@jegesh:问题的结尾表示“我想知道显示了多少项。”@BoltClock谢谢，我希望避免重复检查，但你所说的似乎证实了我自己的发现。我在其他地方看到，您可以查询CSS选择器，但不能用于查询？@Phil querySelector用于查询元素的属性，您无法查询CSS规则。在您的情况下，我建议使用不同的类名和使用特定类名的查询元素。我认为您根本不理解这个问题。不，谢谢您的提问。此代码没有说明如何查找正在显示的

li

元素。它只获取所有

li

元素。我看到您添加了一些文本节点和innerHTML示例-我也不确定这两件事如何解决这个问题。编写

innerHTML

是一种错误做法。要获得列表项的计数，只需执行

document.getElementById（“ul1”）.getElementsByTagName（“li”）.length
<!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>