Question

我有多个具有相同“列”类的“ div”元素，并且每个元素中都有一个具有“列表”类的无序列表“ ul”和具有“项目”类的元素“ li”。

“ li.item”的数量取决于不同的“ column”。如何计算单个“列”中“ li.item”的数量？

我尝试过：

<div class="column">
<ul class="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
</ul>
</div>
<div class="column">
<ul class="list">
<li class="item">item 4</li>
<li class="item">item 5</li>
</ul>
</div>
<div class="column">
<ul class="list">
<li class="item">item 6</li>
</ul>
</div>

https://jsfiddle.net/u0hj58xe/

我很想拥有：3，2，1插入6,6,6（每个div分别处理）。

Answer 1

您需要使用.each()遍历列

$('.column').each(function(){
  console.log($(this).find('.item').length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="column">
  <ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
  </ul>
</div>
<div class="column">
  <ul class="list">
    <li class="item">item 4</li>
    <li class="item">item 5</li>
  </ul>
</div>
<div class="column">
  <ul class="list">
    <li class="item">item 6</li>
  </ul>
</div>

Answer 2

您当前的代码定位到所有ul元素。您需要遍历ul元素，然后在其中查找子元素。您可以使用元素上下文this来定位ul中当前的.each()以及遍历选择器来查找元素并在div中附加计数信息：

$('.list').each(function(){
  var $this = $(this);
  var items = $this.find('.item').length;
  $this.closest('.column').append(items);
});

Working Demo

Answer 3

与其他答案基本相同，只是没有“找到”和“最接近”。

$('.column').each(function(){
var $this = $(this);
$($this).append($('.list .item', $this).length);
});

jQuery：如何通过类计算元素内的子代

3 个答案: