JQuery - find first sibling matches selector

Question

How can i get the first (next) element in the list that matches the selector ?

Example:

<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();
});

edit

I need the following row. siblings gets others as well (like the first row)

i have some dynamic rows that are toggled on and off by the prev' row. i can't use 'next()' since i can't tell which of the rows i will have - and how many. — yossi, May 14 '14 at 17:07

Kiran · Accepted Answer · 2014-05-14T19:09:07.940

32

Use .nextAll() to get following siblings of an element and :first to get first matched element.

Try this:

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

DEMO

edited May 14 '14 at 19:09

answered May 14 '14 at 16:58

Kiran

20,167
11
67
99

score 0 · Answer 2 · answered Aug 25 '15 at 17:03

You may try using jQuery eq();

Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set. Documentation on 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>

The code would select the 2º sibling with the class "test" of the < tr > that is one of the parents to the clicked < a > (red this reversely and you got your code):

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

Check the Pen!

Doesn't 100% answer OP's question as 1) OP asked for the next sbilings thus `nextAll` instead of `siblings` (also select those before) and 2) he asked for the next one (first one) thus `eq(0)` instead of `eq(1)`. Although you mentioned it selects the second one, it's still better practice to directly answer the asked question :) — T_D, Mar 10 '16 at 16:26

score 0 · Answer 3 · answered Jul 21 '21 at 07:03

You can use the .next() selector:

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

For your case, use

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

or

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

JQuery - find first sibling matches selector

3 Answers3