如何计算具有相同类的元素数量？答案

【问题标题】：How can I count the number of elements with same class?如何计算具有相同类的元素数量？
【发布时间】：2012-03-29 17:02:53
【问题描述】：

我的页面中有一个主 div，其中包含特定的 id。现在这个div 中存在一些相同类的输入元素。那么如何使用 jQuery 计算 div 中同一类的这些元素的数量？

【问题讨论】：

什么活动？ DOM 就绪，加载时，点击时..？

标签： javascript jquery

【解决方案1】：

jQuery 可以使用

$('#main-div .specific-class').length

否则在VanillaJS（包括IE8）中你可以使用

document.querySelectorAll('#main-div .specific-class').length;

【讨论】：

使用纯 JS 和兼容/现代浏览器，您可以使用 querySelectorAll()。
我的观点是在您提到它之后提出的，并且确实需要注意 qSA() 仅在最近的浏览器中可用。
有人可以告诉我如何使用带有变量的 jQuery 示例吗？我尝试了几件事，但还没有让它工作。我以为会像console.log($(container_variable '.remove_element').length);
解决了：console.log($('#'+container_variable+' .remove_element').length);
5 年后，您的回答节省了我的时间。谢谢老哥

【解决方案2】：

$('#maindivid').find('input .inputclass').length

【讨论】：

【解决方案3】：

您可以到达父节点，然后使用正在搜索的类查询所有节点。然后我们得到大小

var parent = document.getElementById("parentId");
var nodesSameClass = parent.getElementsByClassName("test");
console.log(nodesSameClass.length);

<div id="parentId">
  <p class="prueba">hello word1</p>
  <p class="test">hello word2</p>
  <p class="test">hello word3</p>
  <p class="test">hello word4</p>
</div>

【讨论】：

如何将所有值相加，得到 9 作为结果？
@Ducky 为什么只有 9 个元素存在 3 个元素
对不起，我的意思不是列出 3 个项目，我是说将值相加，2+3+4=9

【解决方案4】：

document.getElementsByClassName("classstringhere").length

document.getElementsByClassName("classstringhere") 方法返回具有该类名称的所有元素的数组，因此.length 会为您提供它们的数量。

【讨论】：

这是唯一真正回答问题的答案。为什么这不是#1？

【解决方案5】：

最简单的例子：

document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.test').length;

<html>
    <body>
    
    <p id="demo"></p>
    <ul>
      <li class="test">Coffee</li>
      <li class="test">Milk</li>
      <li class="test">Soda</li>
    </ul>

 </body> 
 </html>

【讨论】：

【解决方案6】：

我想显式地编写两种方法，以便在纯 JavaScript 中实现这一点：

document.getElementsByClassName('realClasssName').length

注 1：此方法的参数需要一个带有真实类名的字符串，该字符串的开头没有点。

document.querySelectorAll('.realClasssName').length

注意 2：此方法的参数需要一个 字符串，该字符串具有真实的类名，但在此字符串的开头带有点。

注意 3： 此方法也适用于任何其他 CSS 选择器，不仅适用于类选择器。所以它更通用。

我也写了一个方法，但是使用两个命名约定来解决这个问题，使用jQuery：

jQuery('.realClasssName').length

或

$('.realClasssName').length

注4：这里我们还需要记住类名前的点，我们也可以使用其他CSS em> 选择器。

【讨论】：