Question

我知道对不同的元素使用相同的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>

Answer 1

您不能拥有重复的ID，但如果您不能这样做，则可以将Attribute Equals Selector [name=”value”]与:eq(index)一起使用。 :eq获取集合元素的索引。您可能还想使用背景颜色。

<强> Live Demo

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

Answer 2

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

＆＃13;

$("#btn").click(function(){      
  $("[data-id='test']:eq(1)").css("background","blue");
});

＆＃13;

[data-id='test'] {
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  margin:10px;
}

＆＃13;

<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>

＆＃13;

Answer 3

$("#test:eq(1)").css("background-color","blue");

JQuery：选择具有相同ID的case元素中的第二个元素

3 个答案: