Question

我有这个div：

<div class="mm_vert_container" style="display: block;"></div>

运行jQuery代码后，我在div上方动态添加mm_vert_container，我的代码如下所示：

<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

所以如果存在活动类，我需要添加到每三分之一div，所以需要看起来像这样：

<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div class="active">C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

我尝试使用jQuery代码将class active添加到第三个div：

$(".mm_vert_container div:nth-child(2)").addClass("active");

但它不会将类激活添加到第三个元素。我认为问题是动态生成的div然后使用上面的jQuery代码的DOM元素看不到动态生成的div，这就是为什么不起作用？

Answer 1

首先请注意，使用nth-child选择器的索引从1开始，因此'C'元素位于索引3，而不是2。

要将类添加到每个第三个元素，请使用nth-child(3n)，如下所示：

$(".mm_vert_container div:nth-child(3n)").addClass("active");

.active { 
  color: #FFF;
  background-color: #C00; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

另请注意，此处不需要jQuery，因为CSS中的nth-child()选择器直接受到支持：

.mm_vert_container div:nth-child(3n) { 
  color: #FFF;
  background-color: #C00; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

后者将是更好的解决方案，因为它将JS逻辑与UI分离，并且还意味着您将在页面生命周期中稍后动态添加的任何子div元素将自动给出造型;即。您无需再次手动更新DOM。

Answer 2

使用find()方法找到.mm_vert_container的子元素，并选择:nth-child() Selector的所有元素作为其父级的第n个子元素。

$(".mm_vert_container div:nth-child(3n)").addClass("active");

Answer 3

而不是$(".mm_vert_container div:nth-child(2)").addClass("active");代码应$(".mm_vert_container div:nth-child(3)").addClass("active");影响第三个孩子，因为nth-child(2)表示第二个孩子。

如果想要影响每个第三个孩子，最好使用$(".mm_vert_container div:nth-child(3n)").addClass("active");，那么你就不需要循环了。你只能通过CSS来做到这一点。

我希望这会有所帮助。

感谢。

jQuery将类激活添加到第三个动态创建的div

3 个答案: