jQuery计数具有某个类的div的数量?

时间:2011-09-13 15:33:34

标签: jquery html count

考虑这样的事情;

<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,因为有5个div与item类。

谢谢!

7 个答案:

答案 0 :(得分:110)

您可以使用jquery .length属性

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

答案 1 :(得分:18)

为了获得更好的性能,您应该使用:

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

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

建议:使用size()代替length属性意味着处理过程中的一个额外步骤,因为SIZE()在函数定义中使用length属性并返回结果。

答案 2 :(得分:10)

您可以使用jQuery.children属性。

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

有关详细信息,请参阅http://api.jquery.com/

答案 3 :(得分:2)

我刚刚使用jQuery size函数http://api.jquery.com/size/

创建了这个js函数
function classCount(name){
  alert($('.'+name).size())
}

它会警告类名在文档中出现的次数。

答案 4 :(得分:1)

如果有人可能感兴趣的话,那就是普通的答案;

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

干杯。

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

答案 5 :(得分:1)

可以像这样计算子div

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

输出:5

答案 6 :(得分:0)

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