计算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)指的是box2元素。只有$('.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

this没有指向你正在思考的元素，它指的是调用addClass()的DIV元素，而这个元素没有.box1 li。因此，find()未能提及您想要的元素。

只需使用：

$('.box1 li').length 

$('.box2').addClass(function(){
  console.log(this.nodeName); // DIV
  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 4

$(this).find将发现li中的div与box2类不存在。而是使用div类在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>

Answer 5

您可以通过以下方法完成此操作

$('.box2').addClass('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>