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 元素，并且该元素没有{{1 }}。因此find()无法引用您想要的元素。

只需使用：

.box1 li

$('.box1 li').length

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

Answer 4

<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>将在$(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>

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

5 个答案: