jQuery 在特定元素之后获取 DOM 中的下一个匹配项

Question

我不想承认这一点，但我一直在试图弄清楚如何做到这一点。

例如假装你有以下结构：

<div>
  ...
  <div>
    <ul>
      <li>
        <a href="..."><img class="foo"/></a><!-- "previous" -->
      </li>
      <li>
        <a href="..."><img class="bar"/></a>
      </li>
      <li>
        <a href="..."><img class="foo"/></a><!-- I'm at this node -->
      </li>
      <li>
        <a href="..."><img class="baz"/></a>
      </li>
      <li>
        <a href="..."><img class="foo"/></a><!-- "next" 1 -->
      </li>
    </ul>
  </div>
  ...
  <div>
    <ul>
      <li>
        <a href="..."><img class="foo"/></a><!-- "next" 2 -->
      </li>
      <li>
        <a href="..."><img class="baz"/></a>
      </li>
      <li>
        <a href="..."><img class="foo"/></a><!-- "next" 3 -->
      </li>
      <li>
        <a href="..."><img class="bar"/></a>
      </li>
    </ul>
  </div>
</div>

我在一个与上面的 highlighted "foo" 节点相关的 jQuery 事件处理程序中。我想找到"foo" 的“下一个”img 元素。

不过有 2 个问题。

1. 我只想选择 DOM 中比我所在的当前节点更远的“foo”元素（例如，不需要“前一个”foo 和当前 foo）
2. 尽管我已将嵌套显示为遵循精确的模式，但生成的代码是/可以 嵌套在 any 级别。 ..因此我不能只做 .parent().parent().parent().siblings().find()... 等等。

如果您可以想象，每次浏览器向 DOM 添加一个节点时，它都会增加一个计数器并为该节点分配索引...您可以检索...我想要的是：

var here = $(this).getIndexInDOM();//e.g. returns 347
$('img.foo').each(function(){
  if($(this).getIndexInDOM() > here){//is this past our current index?
    doSomething($(this));//use it
    break;
  }
});

.getIndexInDOM() 方法显然在 jQuery 中不存在......但我很好奇是否有人有解决方案来获得我所追求的“下一个”元素。

目前我能想到的唯一解决方案真的很不优雅，并且在 DOM 中的后半部分图像中表现非常糟糕......

//using vanilla JavaScript
var thisImg = theCurrentImageIHave;//some reference to the DOM element
var found = false;
for(var i=0;i<document.images.length;i++){
  if(found){
    if(document.images[i].className == 'foo'){
      doSomething(document.images[i]);
      break;
    }
  } else {
    if(document.images[i] == thisImg){
      found = true;
    }
  }
}

Answer 1

查看next。它完全符合您的要求。

$('img.foo').next().css('background-color', 'red');

如果您想获取当前所选项目之后的所有项目并且您知道它在 DOM 中的位置，您可以使用gt selector 选择所有“大于”自身的项目。

例如：

$('img.foo:gt(4)')

将返回所有“大于”选择中第 4 项的所有项目（AKA，之后而不是当前项目）。

Answer 2

在点击处理程序中，试试这个：

示例： http://jsfiddle.net/QVphP/ （单击蓝色框为下一个添加边框）

var $foo = $('img.foo');  // get all .foo images

var idx = $foo.index( this );  // get the index position of "this"
                               //    relative to all the .foo images found

var next = $foo.eq( idx + 1 ); // grab the .foo for the incremented index

• http://api.jquery.com/index/
• http://api.jquery.com/eq/

Answer 3

查看this jsfiddle。单击任何带有红色边框 (foo) 的图像，下一个红色边框（下一个 foo）将变为黄色。

根据您在页面中有多少foos，此解决方案可能会影响性能。但由于您还没有使用 1.4，所以这将起作用。