如何在jQuery中选择指定ID下的类元素？多ID同class场景示例

嘿，这两个问题本质是同一个场景的不同问法，我给你拆解清楚：

问题1：如何在jQuery中选择某个ID下的类？ #

有两种非常常用的方式，按需选择就行：

• 后代选择器写法：直接组合ID选择器和类选择器，用空格分隔，语法是：$("#目标ID .目标类名")。空格的作用是告诉jQuery“找ID元素内部所有符合类名的后代元素”。
• .find()方法写法：先选中目标ID的元素，再用.find()方法筛选内部的类元素，语法是：$("#目标ID").find(".目标类名")。这种方式在需要链式调用其他方法时会更顺手。

问题2：两个ID不同但类名相同的div，如何选择指定ID下的此类元素？ #

其实就是把上面的方法分别套用到不同ID上就可以了，这样就能精准定位到某个ID下的目标类元素，不会和其他ID下的同名类元素混淆。

完整可运行示例代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
  <button class="select">one</button>
</div>
<div id="2">
  <button class="select">two</button>
</div>
<script>
$(function() {
  // 用find()方法选中id="1"下的.select元素
  $('#1').find('.select').click(function() {
    alert("1 clicked ");
  });
  
  // 用后代选择器选中id="2"下的.select元素
  $("#2 .select").click(function() {
    alert("2 clicked ");
  });
});
</script>

代码解释 #

两种写法都能实现相同的效果：点击id为1的div里的按钮，弹出“1 clicked ”；点击id为2的div里的按钮，弹出“2 clicked ”。你可以根据自己的代码习惯选择其中一种写法，甚至混合使用都没问题～

内容的提问来源于stack exchange，提问作者Saurabh Kumar Singh