如何用jQuery仅为#left-well中的第二个.target按钮添加CSS类？

你的问题出在选择器的范围上：.target:nth-child(2)会匹配所有父元素下的第二个子元素且带有.target类的元素，所以左右两个well里的第二个按钮都会被选中——它们各自都是父容器（#left-well和#right-well）的第二个子元素。

要只选中#left-well里的第二个按钮，你需要把选择器的范围限定在#left-well内部，以下几种方式都可以实现：

方式一：直接限定父容器范围 #

$(document).ready(function() {
  $("#left-well .target:nth-child(2)").addClass("animated bounce");
});

这里#left-well .target:nth-child(2)的逻辑是：先定位到id为left-well的元素，再在它的后代中筛选出「是父元素第二个子元素且带有.target类」的元素，精准缩小了选择范围。

方式二：使用find()方法 #

$(document).ready(function() {
  $("#left-well").find(".target:nth-child(2)").addClass("animated bounce");
});

find()方法会在已选中的#left-well元素内部查找匹配的子元素，和方式一效果完全一致，只是写法更侧重分步操作。

方式三：使用jQuery的:eq()选择器 #

如果你习惯按索引计数（注意jQuery的:eq()是从0开始的），也可以这么写：

$(document).ready(function() {
  $("#left-well .target:eq(1)").addClass("animated bounce");
});

:eq(1)表示选中匹配元素列表中的第二个（索引为1），同样限定在#left-well内部，不会影响右侧的按钮。

以上三种方法都能实现需求，选你觉得最直观的写法即可。

内容的提问来源于stack exchange，提问作者Satyam Rai