How to select next matching element?

Question

This works:

<a href="#/link1">link1</a>
<a href="#/link2">link2</a>
<a href="#/link3">link3</a>

$("a[href*='#/link1'").next('a[href*="#"]').click();

but this does not:

<a href="#/link1">link1</a><br>
<a href="#/link2">link2</a><br>
<a href="#/link3">link3</a><br>

$("a[href*='#/link1'").next('a[href*="#"]').click();

The above tests the "< br >" tag, not the next matching link.

How would I go about making it work in both situations. I want to select the next matching element, not the next element if it matches. Maybe .next() isn't the correct method?

Answer 1

The second example should not select anything at all. Read the documentation of next:

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.

You have to use nextAll to get all siblings and filter them accordingly:

$("a[href*='#/link1']").nextAll('a[href*="#"]:first').click();

Reference: nextAll

Answer 2

Use .nextAll() and :first to get the next sibling that matches, rather than the next sibling if it matches, like this:

$("a[href*='#/link1'").nextAll('a[href*="#"]:first').click();