jQuery 按类计算元素 - 实现这一点的最佳方法是什么？答案

【问题标题】：jQuery counting elements by class - what is the best way to implement this?jQuery 按类计算元素 - 实现这一点的最佳方法是什么？
【发布时间】：2011-02-13 05:07:33
【问题描述】：

我要做的是计算当前页面中具有相同类的所有元素，然后我将使用它添加到输入表单的名称中。基本上，我允许用户单击<span>，然后通过这样做为更多相同类型的项目添加另一个。但是我想不出一种方法来简单地用 jQuery/JavaScript 来计算所有这些。

然后我打算将该项目命名为 name="whatever(total+1)" 之类的名称，如果有人有简单的方法来做到这一点，我将非常感激，因为 JavaScript 并不是我的母语。

【问题讨论】：

我看到的第一个人得到了它，我不知道它是一个简单的 $('.classname').length 得到它。如果我有更多可以给我。没想到要这样试。我已经设置了很多变量和简单的东西，比如附加文档等。哇，我现在感觉很愚蠢，我应该考虑寻找 .length() 命令来看看它说什么......谢谢大家顺便说一句。
+1 用于提出像尤达这样的问题
@jbnunn 尤达是什么？

标签： javascript jquery css element

【解决方案1】：

应该是这样的：

// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length

附带说明一下，在链接 jQuery 对象上的大量函数调用之前检查长度属性通常是有益的，以确保我们确实有一些工作要执行。见下文：

var $items = $('.myclass');
// Ensure we have at least one element in $items before setting up animations
// and other resource intensive tasks.
if($items.length)
{
  $items.animate(/* */)
    // It might also be appropriate to check that we have 2 or more
    // elements returned by the filter-call before animating this subset of 
    // items.
    .filter(':odd')
      .animate(/* */)
      .end()
    .promise()
    .then(function () { 
       $items.addClass('all-done');
    });
}

【讨论】：

只是想分享一下，这也适用于计算元素的子元素，因为这就是我登陆这里时所做的：children('div.classname').length

【解决方案2】：

获取引用同一类的元素的数量就这么简单

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                alert( $(".red").length );
            });

        </script>
    </head>
    <body>

        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
    </body>
</html>

【讨论】：

【解决方案3】：

var count = $('.' + myclassname).length;

【讨论】：

【解决方案4】：

计数：

$('.yourClass').length;

应该可以正常工作。

存储在变量中很简单：

var count = $('.yourClass').length;

【讨论】：

【解决方案5】：

HTML：

<div>
    <img src='' class='class' />
    <img src='' class='class' />
    <img src='' class='class' />
</div>

JavaScript：

var numItems = $('.class').length; 
        
alert(numItems);

Fiddle demo for inside only div

【讨论】：

【解决方案6】：

试试

document.getElementsByClassName('myclass').length

let num = document.getElementsByClassName('myclass').length;
console.log('Total "myclass" elements: '+num);

.myclass { color: red }

<span class="myclass" >1</span>
<span>2</span>
<span class="myclass">3</span>
<span class="myclass">4</span>

【讨论】：