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

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

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

jQuery .length获取项目数，但将它们全部累加。在元素中添加一个类可以解决此问题，但是我可以通过编程来实现。

我目前正在构建一个滑块，该滑块将根据元素内的项目数应用宽度。

因此，如果一张幻灯片的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>

最佳答案

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

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>