计算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 内部搜索 .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>

Answer 2

这里$(this)指的是box2element.Only $('.box1 li').length是您所需要的

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

.list_3 {
  color: green;
}

<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>

Answer 3

这不是指向您正在考虑的元素，而是指向 DIV元素，在该元素上addClass()调用，而该元素没有.box1 li。因此find()无法引用您想要的元素。

只需使用：

$('.box1 li').length 

$('.box1 li').length 

$('.box2').addClass(function(){
  console.log(this.nodeName); // DIV
  return 'list' + $('.box1 li').length;
});

Answer 4

$(this).find将li在divwith box2类中找到不存在的。而是在divwith box1类中检查并找到li元素

$('.box2').addClass(function(){
  return 'list' + $('.box1').find('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>