javascript - 计算 li 元素的数量并添加类

Question

我正在尝试对 li 元素进行计数，并将 addClass 计数到另一个 div。

例如:

$('.box2').addClass(function(){
  return 'list' + $(this).find('.box1 li').length;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>


<div class="box2">text</div>

应该是这样的

<div class="box2 list3">text</div>

但我不知道为什么当我查看 DOM 代码时，

<div class="box2 list0">text</div>

我得到了这个结果。

修复代码需要什么？请帮忙。

Answer 1

您的查询查找 .box1 li within .box2，尽管这两个元素是兄弟元素。因此，您的 find() 查询将始终返回 0。

要使您的查询有效，您的 HTML 需要如下所示:

<div class="box2">text
  <ul class="box1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

在不改变HTML结构的情况下，您可以通过直接访问.box1 li使其工作:

$('.box2').addClass(function(){
  return 'list' + $('.box1 li').length;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<div class="box2">text</div>