jQuery计算某个类的div的数量？

uemypmqf 于 2023-03-17 发布在 jQuery

关注(0)|答案(8)|浏览(175)

考虑到这样的事情;

<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。
谢谢！

jquery

来源：https://stackoverflow.com/questions/7404544/jquery-count-number-of-divs-with-a-certain-class

8条答案

按热度按时间

euoag5mw1#

您可以使用jquery .length属性

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

赞(0）回复(0）举报 2023-03-17

rpppsulh2#

要获得更好的性能，应用途：

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

因为它只会在DOM中查找div元素，而且速度很快。

**建议：**使用size()而不是length属性意味着在处理过程中多了一步，因为SIZE()在函数定义中使用length属性并返回结果。

赞(0）回复(0）举报 2023-03-17

e5nszbig3#

您可以使用jQuery.children属性。

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

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

赞(0）回复(0）举报 2023-03-17

jslywgbw4#

如果有人感兴趣的话，请回答这个简单的问题;

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

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

赞(0）回复(0）举报 2023-03-17

5lwkijsr5#

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

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

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

赞(0）回复(0）举报 2023-03-17

llycmphe6#

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

赞(0）回复(0）举报 2023-03-17

lstz6jyr7#

我可以计算这样的子div

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

输出：5

赞(0）回复(0）举报 2023-03-17

omhiaaxx8#

我正在寻找表tr元素的计数，但在我的情况下，我需要计数应该真实的更新。这里是我的解决方案，以获得tr计数实时。
查询：

$(document).ready(function() {
   // Get initial number of rows
   var rowCount = $('#myTable tr').length;
   $('#rowCount').text(`Total rows: ${rowCount}`);

   // Handle rows being added
   $('#myTable').on('DOMNodeInserted', function() {
      rowCount = $('#myTable tr').length;
      $('#rowCount').text(`Total rows: ${rowCount}`);
   });

   // Handle rows being removed
   $('#myTable').on('DOMNodeRemoved', function() {
      rowCount = $('#myTable tr').length;
      $('#rowCount').text(`Total rows: ${rowCount}`);
   });
});

此代码侦听#myTable元素上的DOMNodeInserted和DOMNodeRemoved事件。当触发这些事件时（即添加或删除行时），代码更新rowCount变量并在#rowCount元素中显示更新的计数。

赞(0）回复(0）举报 2023-03-17

我来回答

jQuery计算某个类的div的数量？

8条答案

相关问题

热门标签

最新问答