jquery - jQuery：在循环中计算具有相同类的不同孩子

Question

假设我有这样的 HTML：

<div class="somediv"></div> 
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>
<div class="someotherdiv"></div> 

... child 4, child 5 etc. child n;

如何创建一个 jQuery 循环，在其中计算有多少 .child1、.child2、.child3、... 存在？

ps: 函数 .length(); 现在不起作用，所以也许让我们找到一个替代方案。此外，在 DOM 中还会有许多其他具有多个其他类的 div，这些类不应在此处处理/影响（性能）。

标签： jquery

Answer 1

您实际上不需要为此使用 jQuery：使用纯 JavaScript 可以轻松完成工作。您所需要的只是使用将适用于您感兴趣的元素的选择器（在这种情况下，我使用 运行div，但您可以使用，例如，.children缩小您的选择范围）。

检索到 HTMLCollection 后，您只需遍历它即可。对于您遇到的每个 HTML 元素，您遍历其classList属性并将它们推送/增加它们在字典中的相应值：

const classDictionary = {};
const els = document.querySelectorAll('div');

Array.from(els).forEach(el => {
  el.classList.forEach(className => {
    if (!(className in classDictionary)) {
      classDictionary[className] = 1;
    } else {
      classDictionary[className]++;
    }
  });
});

console.log(classDictionary);

<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>

---

当然，如果你真的必须使用 jQuery，那也是完全可以的：

$(function() {
  const classDictionary = {};
  
  $('div').each(function() {
    this.classList.forEach(className => {
      if (!(className in classDictionary)) {
        classDictionary[className] = 1;
      } else {
        classDictionary[className]++;
      }
    });
  });

  console.log(classDictionary);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>