javascript - How to select next matching element? - Stack Overflow

admin管理员组

文章数量:1202392

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Sep 8, 2011 at 23:06 Felix Kling 816k180180 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Jan 11, 2011 at 19:26 DaveDave 9,1471010 gold badges3535 silver badges4747 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 18

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

本文标签： javascriptHow to select next matching elementStack Overflow