jQuery 计算某个类的 div 数量？

发布于 2024-12-04 15:05:12 字数 391 浏览 2 评论 0原文

考虑这样的事情；

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

谢谢！

原文

Considering something like this;

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

How would I, using jQuery (or plain JS, if it's shorter - but I doubt it) count the number of divs with the "item" class? In this example, the function should return 5, as there are 5 divs with the item class.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

守望孤独 2024-12-11 15:05:12

您可以使用 jquery .length 属性

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

You can use the jquery .length property

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

回复收藏 0 原文

满天都是小星星 2024-12-11 15:05:12

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

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

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

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

For better performance you should use:

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

Since it will only look for the div elements in DOM and will be quick.

Suggestion: using size() instead of length property means one extra step in the processing since SIZE() uses length property in the function definition and returns the result.

回复收藏 0 原文

百变从容 2024-12-11 15:05:12

您可以使用 jQuery.children 属性。

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

有关更多信息，请参阅 http://api.jquery.com/

You can use jQuery.children property.

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

for more information refer http://api.jquery.com/

回复收藏 0 原文

向日葵 2024-12-11 15:05:12

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

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

干杯。

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

And for the plain js answer if anyone might be interested;

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

Cheers.

Reference: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

回复收藏 0 原文

偏爱你一生 2024-12-11 15:05:12

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

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

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

I just created this js function using the jQuery size function http://api.jquery.com/size/

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

It alerts out the number of times the class name occurs in the document.

回复收藏 0 原文

〃温暖了心ぐ 2024-12-11 15:05:12

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

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

维持三分热 2024-12-11 15:05:12

可以像这样计算子div的

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

输出：5

can count child divs like this

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

outout : 5

回复收藏 0 原文

孤寂小茶 2024-12-11 15:05:12

我正在寻找表 tr 元素的计数，但就我而言，我需要计数应该实时更新。这是我实时获取 tr 计数的解决方案。

Jquery：

$(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 元素中显示更新的计数。

I was looking to count for table tr elements but in my case I was needed count should be updated in real time. Here is my solution to get tr count real time.

Jquery:

$(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}`);
   });
});

This code listens for the DOMNodeInserted and DOMNodeRemoved events on the #myTable element. When those events fire (i.e. when rows are added or removed), the code updates the rowCount variable and displays the updated count in the #rowCount element.

回复收藏 0 原文

~没有更多了~