jQuery 计算某个类的 div 数量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7404544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery count number of divs with a certain class?
提问by Brian Glaz
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.
我将如何使用 jQuery（或纯 JS，如果它更短 - 但我怀疑它）使用“item”类计算 div 的数量？在此示例中，该函数应返回 5，因为 item 类有 5 个 div。
Thanks!
谢谢！
回答by Brian Glaz
回答by Ghazanfar Mir
For better performance you should use:
为了获得更好的性能，您应该使用：
var numItems = $('div.item').length;
Since it will only look for the divelements in DOMand will be quick.
因为它只会寻找其中的div元素DOM并且会很快。
Suggestion:using size()instead of lengthproperty means one extra step in the processing since SIZE()uses lengthproperty in the function definition and returns the result.
建议：使用size()代替length属性意味着处理中的一个额外步骤，因为在函数定义中SIZE()使用length属性并返回结果。
回答by Nikhil salwe
You can use jQuery.children property.
您可以使用 jQuery.children 属性。
var numItems = $('.wrapper').children('div').length;
for more information refer http://api.jquery.com/
有关更多信息，请参阅http://api.jquery.com/
回答by Pax Vobiscum
And for the plain js answer if anyone might be interested;
对于普通的 js 答案，如果有人可能感兴趣的话；
var count = document.getElementsByClassName("item");
Cheers.
干杯。
Reference: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
参考：https: //www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
回答by Vlad
I just created this js function using the jQuery size function http://api.jquery.com/size/
我刚刚使用 jQuery 大小函数http://api.jquery.com/size/创建了这个 js 函数
function classCount(name){
alert($('.'+name).size())
}
It alerts out the number of times the class name occurs in the document.
它会提醒类名在文档中出现的次数。
回答by Pratik Shah
<!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>
