如何选择下一个匹配元素？

Question

这有效：

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

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

但这不是：

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

以上测试“＆lt; br＆gt;”标签，而不是下一个匹配的链接。

我如何在两种情况下都能使它发挥作用。我想选择下一个匹配元素，如果匹配则不是下一个元素。也许.next（）不是正确的方法？

Answer 1

第二个例子不应该选择任何东西。阅读documentation of next：

  

在匹配元素集中获取每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

您必须使用nextAll来所有兄弟姐妹，并相应地过滤它们：

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

参考：nextAll

Answer 2

使用.nextAll()和:first来获取匹配的下一个兄弟，而不是下一个兄弟如果匹配，就像这样：

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

Answer 3

创建一个名为nextMatching的简单jQuery插件：

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

并像这样使用它：给定以下标记...

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

...并从元素1开始，您可以像这样选择元素5：

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