javascript - 分别统计每个元素内的元素

Question

我想弄清楚如何分别获取或计算每个元素中的元素。这是下面的代码，向您展示我的问题。

在这里你可以看到我有一个包含不同数量元素的列表元素。现在，如果我想分别获取每个元素的元素数，然后将它们存储在一个变量中，以便我可以使用该值，该怎么办。

jquery .length 获取元素的数量，但它会将它们全部加起来。向元素添加一个类可以解决这个问题，但我可以通过编程来代替。

我目前正在构建一个 slider ，它将根据元素内的元素数应用宽度。

因此，如果第一张幻灯片有 3 个宽度为 20px 的元素，则幻灯片的总宽度将为 60px

如果第二张幻灯片有 5 个元素，则总计为 100px。

var count = $('.list li').length;

console.log(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="list">
    <li>One</li>
    <li>Two</li>
</ul>

Answer 1

您需要使用 .each() 迭代 list，然后检查每个列表的内容，如下所示:

var lengths = [];
$('.list').each(function() {
  var items = $(this).find('li');
  console.log(items.length);
  lengths.push(items.length); // gather into lengths variable
});
console.log("lengths = [" + lengths + "]");
// You can now use lengths[i] as desired.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul class="list">
  <li>One</li>
  <li>Two</li>
</ul>