jQuery 计算某个类的 div 数？
Posted
技术标签:
【中文标题】jQuery 计算某个类的 div 数？【英文标题】：jQuery count number of divs with a certain class? 【发布时间】：2011-11-16 07:13:02 【问题描述】：考虑这样的事情；
<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，因为 item 类有 5 个 div。
谢谢！
【问题讨论】：
试试 $("div.item").length 或 $("div.item").size() 这应该对你有帮助：[Link][1] [1]: ***.com/questions/2727303/… size() 已被弃用，坚持长度 【参考方案1】：您可以使用 jquery .length 属性
var numItems = $('.item').length;
【讨论】：
...我认为应该使用 $('div.item') 来计算具有该类的 div（并且不包括 .item 类的任何其他类型的元素）。 谢谢，这正是我所需要的！时间一到我会接受你的答复！ @jjmontes 这是真的。当然，您可以使用任何选择器.. 但这取决于 OP 想要获得的具体程度。例如$('div.wrapper div.item') 会更接近。
在我得到 length 之后，如何为每个具有该类的 div 设置一个数组？例如，我想在第一个或第二个 div 中输入带有 .html() 的文本项目。【参考方案2】：
为了获得更好的性能，您应该使用：
var numItems = $('div.item').length;
因为它只会在DOM 中寻找div 元素并且会很快。
建议：使用size()而不是length属性意味着处理中的额外步骤，因为SIZE()在函数定义中使用length属性并返回结果。
【讨论】：
我很想知道使用div.item 而不是.item 在时间/性能方面的差异是什么，当然这取决于文档的大小，但一般来说我很想知道这是否会产生重大影响【参考方案3】：
您可以使用 jQuery.children 属性。
var numItems = $('.wrapper').children('div').length;
更多信息请参考http://api.jquery.com/
【讨论】：
【参考方案4】：如果有人感兴趣的话，对于简单的 js 答案；
var count = document.getElementsByClassName("item");
干杯。
参考：https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
【讨论】：
【参考方案5】：我刚刚使用jQuery size函数http://api.jquery.com/size/创建了这个js函数
function classCount(name)
alert($('.'+name).size())
它会提醒类名在文档中出现的次数。
【讨论】：
【参考方案6】：可以像这样计算子 div
let number_of_child_divs = $('.wrapper').children('.item').length;
输出：5
【讨论】：
【参考方案7】：<!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>
【讨论】：
你必须得到类的总数，然后如果你能得到最后 3 个元素删除所以得到总数 - 3 然后使用最后 3 个记录删除类的每个循环和条件。以上是关于jQuery 计算某个类的 div 数？的主要内容，如果未能解决你的问题，请参考以下文章