jQuery 添加 class active 到第三个动态创建的 div

Question

我有这个 div:

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

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

<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 如果存在 class 活动所以需要看起来像这样：

<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");

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

Answer 1

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

要将 class 添加到每三个元素，请使用 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，因为 nth-child() 选择器直接在 CSS 中得到很好的支持：

.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 分离，并且还意味着您稍后在页面生命周期将自动赋予样式； IE。您不需要再次手动更新 DOM。

Answer 2

使用 find() method and :nth-child() Selector 查找 .mm_vert_container 的子元素，以选择作为其父元素的第 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"); 来影响第三个 child，因为 nth-child(2) 意味着第二个 child.

如果你想每隔三分之一 child 效果一次，最好使用 $(".mm_vert_container div:nth-child(3n)").addClass("active");，这样你就不需要循环了。您只能通过 CSS.

来执行此操作

希望对您有所帮助。

谢谢。

jQuery 添加 class active 到第三个动态创建的 div

jQuery add class active to third dynamically created div

javascript

jquery

dynamically-generated