jQuery按类计数元素-实现此目的的最佳方法是什么？

373

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

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

— 133794立方米
source

3

我看到的第一个得到它的人，但我不知道这是一个简单的$（'。classname'）。length来获得它。如果我有更多奉献，我会的。没想到要那样尝试。我已经设置了很多变量和一些简单的事情，例如附加文档等。哇，我现在感觉很愚蠢，我应该考虑寻找.length（）命令，看看它说的是什么...感谢大家顺便说一句

— 133794m3r 2010年

26

+1提出类似Yoda的问题

— jbnunn 2012年

6

@jbnunn尤达是什么？

— shasi kanth，2014年

691

应该只是这样：

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

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

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');
    });
}

— 帕特里克·阿克斯特兰德
source

4

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

— brs14ku 2014年

23

如此简单地获取引用同一类的元素的数量即可

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

— 乔纳森
source

14

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

— 马克斯·沙瓦布（Max Shawabkeh）
source

9

用于计数：

$('.yourClass').length;

应该工作正常。

存储在变量中很容易：

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

— 阿拉斯泰尔·皮茨
source

6

HTML：

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

JavaScript：

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

alert(numItems);

小提琴演示仅在内部div

— 尼罗什·达拉德（Nilesh Darade）
source

2

尝试

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>

展开摘要

— 卡米尔（KamilKiełczewski）
source