提问人：Satyam Rai 提问时间：5/31/2023 最后编辑：InSyncSatyam Rai 更新时间：5/31/2023 访问量：26
使用 JQuery ：nth-child（n） 选择器定位属于特定类的子元素
Targeting child elements belonging to a specific class using JQuery :nth-child(n) selector
问：
我正在尝试使用 JQuery 在特定的 html 按钮上应用一些 CSS 类。我尝试定位的按钮是 div 中的第二个按钮。我的 html 中的所有按钮都有 的类，我正在使用 .但是在运行脚本时，两个 div （ 和 ） 的第二个按钮都会成为目标。#left-well.target$(".target:nth-child(2)").addClass("animated bounce")#left-well#right-well
如何编写 JQuery，以便只有 中的第二个按钮才能将类应用于它？#left-well
以下是代码供您参考：
$(document).ready(function() {
$(".target:nth-child(2)").addClass("animated bounce");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>答：
1赞
Simone Rossaini
5/31/2023
#1
只需添加到选择器，例如：#left-well
$(document).ready(function() {
$("#left-well .target:nth-child(2)").addClass("animated bounce");
});.animated,.bounce{
color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>下次请看参考资料：Jquery Selectors
评论
1赞
Satyam Rai
5/31/2023
参考资料非常有用。谢谢。
评论