ul标签> li我想获取标签数量

Question

在源中，我们想找到属于li.q_basket_area的{​​{1}}的数量。

控制台日志中显示的值为3而不是5。

控制台正确输出5。

ul#side-recent-area

在上述情况下，nodesSameClass的值为3。

$newAt(".recent_number").text('['+ nodesSameClass +']'); 类的样式为diplaynone

这会受到影响吗？怎么了？

谢谢。

display:none!important;

var parent = document.getElementById("side-recent-area");
var nodesSameClass = parent.getElementsByClassName("q_basket_area");
console.log(nodesSameClass.length);

.displaynone {display:none!important;}

Answer 1

结果没有错。查看Terry的文章如何排除不希望作为元素的任何内容。它完全可以回答您的问题。

作为解决方案的另一种方法是使用querySelectorAll。

var l = document.querySelectorAll( 'ul#side-recent-area li.q_basket_area:not(.displaynone)' ).length;
console.log( l ); // run this to get the result

Answer 2

当选择其类与q_basket_area相匹配的元素时，JS将返回所有节点，无论它们是否可见。如果要过滤节点集合以仅保留可见节点，则需要：

1. 将节点集合转换为数组
2. 通过分别检查元素的计算样式以查看其display属性是否设置为"none"来过滤数组

在JavaScript中，可以按照以下步骤操作：

1. 使用Array.prototype.slice.call(<NodeCollection>)将集合转换为数组
2. 通过检查计算的display属性（使用window.getComputedStyle(<YourElement>).display可访问该属性并检查其是否与字符串"none"相匹配）来过滤数组。

var parent = document.getElementById("side-recent-area");
var nodesSameClass = parent.getElementsByClassName("q_basket_area")

var visibleNodes = Array.prototype.slice.call(nodesSameClass)
   .filter(function(element) {
     return window.getComputedStyle(element).display !== 'none';
  });

console.log(visibleNodes.length);

请参阅以下代码段作为概念验证演示：

var parent = document.getElementById("side-recent-area");
var nodesSameClass = parent.getElementsByClassName("q_basket_area")
  
var visibleNodes = Array.prototype.slice.call(nodesSameClass)
   .filter(function(element) {
     return window.getComputedStyle(element).display !== 'none';
  });

console.log(visibleNodes.length);

.displaynone {display:none!important;}

<span class="recent_number"></span>
<ul id="side-recent-area" class="side-recent-area">
    <li class="q_basket_area xans-record-">
        <div class="q_basket_details displaynone">
            <h3 class="q-heading -size-xs">
                <a href="/show/board.html##param##">product</a>
            </h3>
            <ul class="q_basket_info">
                <li class="q_basket_name">
                    <a href="#;" class="displaynone">(eng : )</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="q_basket_area xans-record-">
        <div class="q_basket_details displaynone">
            <h3 class="q-heading -size-xs">
                <a href="/show/board.html##param##">product</a>
            </h3>
            <ul class="q_basket_info">
                <li class="q_basket_name">
                    <a href="#;" class="displaynone">(eng : )</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="q_basket_area xans-record-">
        <div class="q_basket_details displaynone">
            <h3 class="q-heading -size-xs">
                <a href="/show/board.html##param##">product</a>
            </h3>
            <ul class="q_basket_info">
                <li class="q_basket_name">
                    <a href="#;" class="displaynone">(eng : )</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="q_basket_area displaynone xans-record-">
        <div class="q_basket_details displaynone">
            <h3 class="q-heading -size-xs">
                <a href="/show/board.html##param##">product</a>
            </h3>
            <ul class="q_basket_info">
                <li class="q_basket_name">
                    <a href="#;" class="displaynone">(eng : )</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="q_basket_area displaynone xans-record-">
        <div class="q_basket_details displaynone">
            <h3 class="q-heading -size-xs">
                <a href="/show/board.html##param##">product</a>
            </h3>
            <ul class="q_basket_info">
                <li class="q_basket_name">
                    <a href="#;" class="displaynone">(eng : )</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

---

如果您熟悉ES6语法，事情会变得容易得多：

const parent = document.getElementById("side-recent-area");
const nodesSameClass = parent.getElementsByClassName("q_basket_area")

const visibleNodes = Array.from(nodesSameClass)
   .filter(element => window.getComputedStyle(element).display !== 'none');

console.log(visibleNodes.length);

区别在于：

1. 您可以使用const代替var
2. 您可以使用Array.from将NodeCollection转换为数组
3. 您可以在Array.prototype.filter()方法的回调中使用箭头功能

Answer 3

您还可以使用CSS获取列表项的计数：

签出：https://www.w3schools.com/css/css_counters.asp

li {
	counter-increment: section
}

ul:after {
	content: "Item Count:" counter(section) "";
	margin-top: 2rem;
	display: block;
}

<ul>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
	<li>List item.</li>
</ul>