JQuery:如果存在具有相同 ID 的元素，则选择第二个元素

JQuery:Selecting second element in case element with same ID exists

本文关键字：元素 第二个 选择 ID 如果 存在 JQuery      更新时间：2023-09-26

我知道对不同的元素使用相同的id不是一个好的做法，但是在这种情况下，我被迫对两个不同的元素使用相同的id（这将在原始程序中自动生成）

我正在尝试选择具有相同 id 的第二个元素（或者在缩放时说，第 n 个元素）。

有没有办法做到这一点？

我在这里创建了一个代码片段，显示了问题。 

$("#btn").click(function(){
  
  $("#test").css("background","blue");
});
#test {
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  margin:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
<div id="test">
</div>
<button id="btn">Click Me</button>

您不能有重复的 id，但如果不能这样做，您可以将属性等于选择器 [name="value"] 与 ：eq（index） 一起使用。:eq采用集合元素的索引。您可能还想使用背景色。

现场演示 

 $("[id=test]:eq(1)").css("background-color","blue");

请尝试改用 data-id 属性，因为重复的 id 会产生不可预知的行为。

$("#btn").click(function(){      
  $("[data-id='test']:eq(1)").css("background","blue");
});
[data-id='test'] {
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  margin:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="test">
</div>
<div data-id="test">
</div>
<button id="btn">Click Me</button>

$("#test:eq(1)").css("background-color","blue");
相关文章：