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

Answer 2

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

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

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

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

2 个答案: