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

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

上述代码测试的是"< br >"标签，而不是下一个匹配的链接。

我该怎么做才能让它在两种情况下都起作用？我想选择下一个匹配的元素，而不是如果匹配就选择下一个元素。也许 .next() 不是正确的方法？

- Dave

Answer 1

第二个例子根本不应该选择任何内容。请阅读next的文档：

获取匹配元素集合中每个元素之后的紧邻同辈元素。如果提供选择器，则仅检索与选择器匹配的下一个同级元素。

您必须使用nextAll来获取所有同级元素并相应地进行过滤：

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

参考资料：nextAll

- Felix Kling

---

我认为楼主已经意识到了 .next() 的不足之处，请务必阅读整个问题 ;) - Nick Craver

@Nick Craver：我发誓它写着“上面的代码选择<br>标签”……也许那只是一厢情愿……我累了 ;) - Felix Kling

如果不使用“:first”，会发生什么？它会点击所有的链接吗？ - Dave

@Dave：是的。至少匹配每个链接。 - Felix Kling

Answer 2

使用 .nextAll() 和 :first 来获取下一个匹配的同级元素，而不是只有当它匹配时才获取下一个同级元素，像这样：

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

- Nick Craver

Answer 3

创建你自己的简单jQuery插件，名为nextMatching：

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

- jbyrd