考虑这样的事情;
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
我如何使用jQuery(或简单的JS,如果它更短 - 但我怀疑它)计算带有“item”类的div的数量?在这个例子中,函数应该返回5,因为有5个div与item类。
谢谢!
答案 0 :(得分:110)
您可以使用jquery .length属性
var numItems = $('.item').length;
答案 1 :(得分:18)
为了获得更好的性能,您应该使用:
var numItems = $('div.item').length;
因为它只会查找div
中的DOM
元素并且会很快。
建议:使用size()
代替length
属性意味着处理过程中的一个额外步骤,因为SIZE()
在函数定义中使用length
属性并返回结果。
答案 2 :(得分:10)
您可以使用jQuery.children属性。
var numItems = $('.wrapper').children('div').length;
有关详细信息,请参阅http://api.jquery.com/
答案 3 :(得分:2)
我刚刚使用jQuery size函数http://api.jquery.com/size/
创建了这个js函数function classCount(name){
alert($('.'+name).size())
}
它会警告类名在文档中出现的次数。
答案 4 :(得分:1)
如果有人可能感兴趣的话,那就是普通的答案;
var count = document.getElementsByClassName("item");
干杯。
参考:https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
答案 5 :(得分:1)
可以像这样计算子div
let number_of_child_divs = $('.wrapper').children('.item').length;
输出:5
答案 6 :(得分:0)
<!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>