如何选择同class的第二个div？点击元素后隐藏对应边框的实现

1. 选中相同class的div的选择器 #

当然存在，直接使用jQuery的类选择器 .d1 就能选中所有拥有d1类的<div>元素。如果要定位到其中特定位置的元素，可以结合:eq()伪类或.eq()方法（索引从0开始计数）。

2. 点击当前.d1元素后选中第二个同class div并隐藏边框 #

当点击某个.d1元素时，你可以先获取所有同class的元素集合，再通过.eq(1)定位到第二个元素（因为索引从0开始，第二个元素的索引是1），最后修改它的边框样式。

HTML 代码示例

<div class="d1" style="border: 2px solid red; padding: 10px; margin: 5px;">第一个d1元素</div>
<div class="d1" style="border: 2px solid blue; padding: 10px; margin: 5px;">第二个d1元素</div>
<div class="d1" style="border: 2px solid green; padding: 10px; margin: 5px;">第三个d1元素</div>

jQuery 代码示例

$(document).ready(function() {
  // 绑定所有.d1元素的点击事件
  $('.d1').click(function() {
    // 获取所有.d1元素，选中第二个（索引1）并隐藏边框
    $('.d1').eq(1).css('border', 'none');
    
    // 如果仅需操作当前元素的同级中的第二个.d1元素，可改用：
    // $(this).siblings('.d1').eq(0).css('border', 'none');
  });
});

补充说明 #

• .eq(index)方法会从匹配的元素集合中选取指定索引的元素，索引从0开始计数。
• 如果DOM结构中.d1元素并非同级，$('.d1').eq(1)会选中页面内所有.d1里的第二个；若只想操作当前元素的同级同class元素，就用siblings('.d1').eq(0)（前提是当前元素为同级中的第一个.d1）。

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