jQuery 计算某个类的 div 数？答案

【问题标题】：jQuery count number of divs with a certain class?jQuery 计算某个类的 div 数？
【发布时间】：2011-11-16 07:13:02
【问题描述】：

考虑这样的事情；

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

我将如何使用 jQuery（或纯 JS，如果它更短 - 但我对此表示怀疑）计算带有“item”类的 div 的数量？在此示例中，该函数应返回 5，因为 item 类有 5 个 div。

谢谢！

【问题讨论】：

试试 $("div.item").length 或 $("div.item").size()
这应该对你有帮助：[Link][1] [1]: stackoverflow.com/questions/2727303/…
size() 已被弃用，坚持长度

标签： jquery html count

【解决方案1】：

您可以使用 jquery .length 属性

var numItems = $('.item').length;

【讨论】：

...我认为应该使用 $('div.item') 来计算具有该类的 div（并且不包括 .item 类的任何其他类型的元素）。
谢谢，这正是我所需要的！时间一到我会接受你的答复！
@jjmontes 这是真的。当然，您可以使用任何选择器.. 但这取决于 OP 想要获得的具体程度。例如$('div.wrapper div.item') 会更接近。
在我得到 length 之后，如何为每个具有该类的 div 设置一个数组？例如，我想在第一个或第二个 div 中输入带有 .html() 的文本项目。

【解决方案2】：

为了获得更好的性能，您应该使用：

var numItems = $('div.item').length;

因为它只会在DOM 中寻找div 元素并且会很快。

建议：使用size()而不是length属性意味着处理中的额外步骤，因为SIZE()在函数定义中使用length属性并返回结果。

【讨论】：

我很想知道使用div.item 而不是.item 在时间/性能方面的差异是什么，当然这取决于文档的大小，但一般来说我很想知道这是否会产生重大影响

【解决方案3】：

您可以使用 jQuery.children 属性。

var numItems = $('.wrapper').children('div').length;

更多信息请参考http://api.jquery.com/

【讨论】：

【解决方案4】：

如果有人感兴趣的话，对于简单的 js 答案；

var count = document.getElementsByClassName("item");

干杯。

参考：https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

【讨论】：

【解决方案5】：

我刚刚使用jQuery size函数http://api.jquery.com/size/创建了这个js函数

function classCount(name){
  alert($('.'+name).size())
}

它会提醒类名在文档中出现的次数。

【讨论】：

【解决方案6】：

可以像这样计算子 div

let number_of_child_divs =  $('.wrapper').children('.item').length;

输出：5

【讨论】：

【解决方案7】：

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .test {
                background: #ff4040;
                color: #fff;
                display: block;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="test"> one </div>
        <div class="test"> two </div>
        <div class="test"> three </div>
        <div class="test"> four </div>
        <div class="test"> five </div>
        <div class="test"> six </div>
        <div class="test"> seven </div>
        <div class="test"> eight </div>
        <div class="test"> nine </div>
        <div class="test"> ten </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            //get total length by class
            var numItems = $('.test').length;
            //get last three count
            var numItems3=numItems-3;         


            var i = 0;
            $('.test').each(function(){
                i++;
                if(i>numItems3)
                {

                    $(this).attr("class","");
                }
            })
        });
    </script>
    </body>
    </html>

【讨论】：

你必须得到类的总数，然后如果你能得到最后 3 个元素删除所以得到总数 - 3 然后使用最后 3 个记录删除类的每个循环和条件。