logo标签列表

UL标签> LI 我想获取标签数量

javascripthtml
4

在源代码中，我们想要找到属于ul#side-recent-area的li.q_basket_area数量。

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

控制台正确输出了5。

$newAt(".recent_number").text('['+ nodesSameClass +']');

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

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

3
我已经将你的代码转换成了可执行片段。正如你所看到的，这个脚本可以运行并在控制台中记录“5”。请 修改 这个可执行片段，使它成为一个 [MCVE] 来展示实际的问题。 - Andreas
当我将这个放在 CodePen 中时，我会得到一个控制台输出 5。 - Alexander van Oostenrijk
@Andreas 这个问题是错误的。已经进行了更正。谢谢。 - soria
@AlexandervanOostenrijk 这个问题是错误的。已经更正了。谢谢。 - soria
一切似乎正常。您有5个元素，但其中2个使用“hidden”类进行了样式设置。页面上的列表中显示了3个产品，并且您的控制台正确显示了总共5个元素。 - Kalnode
显示剩余2条评论
3个回答
2

结果并没有错。请查看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
1
当您选择匹配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() 方法的回调中使用箭头函数
1
你也可以使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接