JQuery - 查找第一个与选择器匹配的兄弟元素

Question

如何获取与选择器匹配的列表中的第一个（下一个）元素？

示例：

<table>
  <tr class="test"><td>not this one</td></tr>
  <tr><td><a title="test">click</a></td></tr>
  <tr><td>not this one</td></tr>
  <tr class="test"><td>this one</td></tr>
  <tr class="test"><td>ignore this as well</td></tr>
</table>

$("a").on('click', function(eve){
  $(this).parents("tr").???(".test").toggle();
});

---

编辑

我需要以下的行。兄弟姐妹也会得到其他人（就像第一行一样）

- yossi

---

你想要做什么？ - Ehsan Sajjad

我有一些动态行，这些行由前一行切换开和关闭。我不能使用“next()”，因为我无法确定我将拥有哪些行 - 以及有多少行。 - yossi

Answer 1

使用.nextAll()方法来获取一个元素之后的所有同级元素，使用:first选择器来获取第一个匹配的元素。

尝试一下：

$("a").on('click', function(eve){
  $(this).parents("tr").nextAll(".test:first").toggle();
});

演示

- Kiran

Answer 2

你可以尝试使用jQuery的eq()方法;

给定一个代表一组DOM元素的jQuery对象，.eq()方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识了该元素在集合中的位置。jQuery文档

<table>
  <tr class="test"><td>not this one</td></tr>
  <tr><td><a title="test">click</a></td></tr>
  <tr><td>not this one</td></tr>
  <tr class="test"><td>this one</td></tr>
  <tr class="test"><td>ignore this as well</td></tr>
</table>

代码会选择被点击的标签的父元素中的 <tr> ，并且选择它的第二个拥有类名“test”的兄弟元素（把这个过程逆推一下就是你的代码）：

$("a").on('click', function(){
  $(this).parents("tr").siblings(".test").eq(1).toggle();
});

检查一下这个代码片段！

- teefars

---

并不能完全回答 OP 的问题，因为 1）OP 要求下一个兄弟元素，因此应该使用 nextAll 而不是 siblings（还要选择那些在前面的兄弟元素），2）他要求下一个（第一个）因此应该使用 eq(0) 而不是 eq(1)。虽然你提到了它选择了第二个，但直接回答所问的问题仍然是更好的做法 :) - T_D

Answer 3

你可以使用.next()选择器：

描述：获取匹配元素集合中每个元素的紧接后续兄弟元素。如果提供了选择器，则仅检索下一个兄弟元素，前提是它与该选择器匹配。

对于你的情况，请使用

$(this).parents("tr").next().next()

或者

$(this).closest("tr").next().next()

- Gabriel Vasile