如何为mm_vert_container内动态生成的第三个div添加active类？

你遇到的问题主要有两个核心原因：选择器索引错误和代码执行时机不对，我们一步步来解决：

1. 修正:nth-child的索引问题 #

CSS的:nth-child()选择器是从1开始计数的，不是编程常用的0起始索引。你要选中第三个<div>元素，应该用:nth-child(3)而不是:nth-child(2)——后者会匹配第二个元素，这就是为什么你的代码没给目标元素加上active类。

2. 确保代码在动态元素插入DOM后执行 #

因为你的<div>是动态生成的，如果在这些元素还没被添加到DOM树的时候就执行addClass()，jQuery自然找不到目标元素。你需要把添加类的代码放在动态元素插入完成之后：

示例代码： #

假设你是通过append()动态添加元素：

// 先获取容器
const $container = $(".mm_vert_container");

// 动态插入div元素
$container.append(`
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
`);

// 元素插入DOM后，再执行添加类的操作
$container.find("div:nth-child(3)").addClass("active");

如果是通过异步请求（比如AJAX）加载内容，要把类添加逻辑放在请求的成功回调里：

$.ajax({
  url: "your-data-url",
  success: function(content) {
    // 把动态内容插入容器
    $(".mm_vert_container").html(content);
    // 此时元素已存在于DOM，执行类添加
    $(".mm_vert_container div:nth-child(3)").addClass("active");
  }
});

额外验证技巧 #

如果不确定元素是否已加载，可以在浏览器控制台执行$(".mm_vert_container div")，查看返回的DOM元素集合是否包含你要操作的元素，以此确认代码执行时机是否正确。

内容的提问来源于stack exchange，提问作者Igor Petev