jQuery通过类来计数元素-什么是实现这个的最佳方法?

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

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

527130 次浏览
小开
最佳答案

应该是这样的:

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


< p >
作为旁注，在链接jQuery对象上的许多函数调用之前检查length属性通常是有益的，以确保我们确实有一些工作要执行。见下文:< / p > 
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');
});
}
小开 
var count = $('.' + myclassname).length;
小开

计算:

$('.yourClass').length;

应该没问题。

在变量中存储就像这样简单:

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

小开

获取引用同一类的元素数量的计数非常简单

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

HTML:

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

JavaScript:

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

alert(numItems);

小提琴演示内部只div

小开

试一试

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>


提交答案