How to select next matching element?

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?

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

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

Create your own simple jQuery plugin called nextMatching:

$.fn.nextMatching = function(selector) {
    return this.nextAll(selector).first();
};

And use it like this: given the following markup...

<li id="startingElement">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li id="targetElement">five</li>
<li>six</li>

...and starting with the element one, you can select element five like this:

$('#startingElement').nextMatching('#targetElement');