获取与 jQuery 中的选择器匹配的下一个元素（不一定是兄弟元素）答案

【问题标题】：Get the next element (not necessarily a sibling) which matches a selector in jQuery获取与 jQuery 中的选择器匹配的下一个元素（不一定是兄弟元素）
【发布时间】：2012-08-11 20:29:06
【问题描述】：

我有这个标记

<a class="foo"></a>
<div>
  <span class="foo"></span>
  <ul>
    <li class="foo"></li>
  </ul>
  <em class="foo"></em>
</div>
<div class="foo"></div>

我将在.foo 上附加一个点击处理程序。我想获取 DOM 树中具有相同类的下一个元素。

我已经用标记和 js 代码制作了一个jsFiddle，如果你想尝试一下。

我可以创建一个包含所有 .foo 元素的数组，然后运行循环以查找当前索引，并返回下一个索引，但我确信有更好的解决方案。此外，如果我将元素动态添加到页面（我会这样做），该解决方案将不起作用。

我应该如何处理这个？

【问题讨论】：

当有人点击 class=foo 的元素时，定义您所说的“下一项”是什么意思？最近的？孩子？兄弟姐妹？
@j08691 这是我想要的顺序：a.foo、span.foo、li.foo、em.foo、div.foo。这样说清楚了吗？
好的，如果我点击 em.foo，你想要什么？
我想要返回 div.foo。

标签： javascript jquery

【解决方案1】：

这将为您提供下一个 .foo 元素：

var foos = $('.foo');
$(".foo").click(function() {
    if($(foos).index(this) + 1 != foos.length)console.log(foos[$(foos).index(this) + 1]);
});

jsFiddle example

针对 Dogbert 的确切需求更新了代码示例：

$(".foo").click(function() {
    var text = "Clicked on a: ";
    text += $(this)[0].tagName;
    text += "; Next is a: ";
    var foos = $(".foo");
    var probably = foos[foos.index(this) + 1];
    if(probably)
        text += probably.tagName;
    else
        text += "Nothing!";
    text += "<br/>";
    $("body").append(text);
});

【讨论】：

.index 看起来是个好主意。如果我动态添加更多.foos，这将不起作用，但我认为它很容易修改。我试试看。
对于动态添加的元素进行修改应该很简单。只需在计算之前重建 foos。
是的。这是完整的答案：jsfiddle.net/Dogbert/tXxng/6。如果您可以将其添加到您的答案中，那对于以后搜索该问题的任何人来说都是很棒的。我会接受你的回答。
@amnotiam 我认为只有this.tagName 可以在那里工作。无论如何，我没有在我的网站中使用该代码，它只是用于调试。

【解决方案2】：

j08691 更快，反正这是我想出的：

http://jsfiddle.net/tXxng/9/

基本上，它与.index() 所做的大致相同；您迭代所有项目并在匹配后返回第一个项目，或者如果匹配是最后一个项目，则返回数组的第一个项目（如果这不是您需要的，可以禁用此循环行为）。

【讨论】：