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

Question

我有这个标记

<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 元素的数组，然后运行循环以查找当前索引并返回下一个索引，但我确信有更好的解决方案。此外，如果我将元素动态添加到页面（我会这样做），该解决方案将不起作用。

我应该如何处理这个？

Answer 1

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

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

jsFiddle 示例

针对 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);
});

​</p>

Answer 2

j08691 更快，无论如何这是我想出的：

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

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