jQuery按类计算元素 - 实现它的最佳方法是什么？
[英]jQuery counting elements by class - what is the best way to implement this?
问题描述
What I'm trying to do is to count all of the elements in the current page with the same class and then I'm going to use it to be added onto a name for an input form. 
我想要做的是计算当前页面中具有相同类的所有元素，然后我将使用它添加到输入表单的名称。 Basically I'm allowing users to click on a <span> and then by doing so add another one for more of the same type of items. 基本上我允许用户点击<span> ，然后通过这样做添加另一个用于更多相同类型的项目。 But I can't think of a way to count all of these simply with jQuery/JavaScript. 但我想不出用jQuery / JavaScript简单计算所有这些的方法。
I was going to then name the item as something like name="whatever(total+1)" , if anyone has a simple way to do this I'd be extremely grateful as JavaScript isn't exactly my native tongue. 然后我会把这个项目命名为name="whatever(total+1)" ，如果有人有一个简单的方法可以做到这一点，我会非常感激，因为JavaScript并不完全是我的母语。
6 个解决方案
解决方案1
651 已采纳 2010-04-28 06:45:14
Should just be something like: 应该是这样的：
// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length
As a side-note, it is often beneficial to check the length property before chaining a lot of functions calls on a jQuery object, to ensure that we actually have some work to perform. 作为旁注，在链接jQuery对象上的大量函数调用之前检查length属性通常是有益的，以确保我们实际上有一些工作要执行。 See below: 见下文：
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');
});
}
解决方案2
23 2010-04-28 06:50:01
Getting a count of the number of elements that refer to the same class is as simple as this 获取引用同一类的元素数量的计数就像这样简单
<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
13 2010-04-28 06:45:29
var count = $('.' + myclassname).length;
解决方案4
8 2010-04-28 06:47:29
for counting: 用于计数：
$('.yourClass').length;
should work fine. 应该工作正常。
storing in a variable is as easy as: 存储在变量中就像以下一样简单：
var count = $('.yourClass').length;
解决方案5
6 2014-08-22 06:42:22
HTML: HTML：
<div>
<img src='' class='class' />
<img src='' class='class' />
<img src='' class='class' />
</div>
JavaScript: JavaScript的：
var numItems = $('.class').length;
alert(numItems);
解决方案6
0 2019-04-25 13:27:08
try 尝试
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.