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

kk kk：

我正在尝试计算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>

我得到这个结果。

我需要修复代码吗？请帮忙。

安迪·霍夫曼（Andy Hoffman）：

您的查询在.box1 li 内部搜索 .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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。