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

我不愿意承认这一点，但我一直在努力弄清楚如何做到这一点。

例如假设您具有以下结构：

<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>

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

但有两个问题。

1. 我只想选择 DOM 中比我所在的当前节点更远的“foo”元素（例如，不需要“前一个”foo 和当前的 foo）
2. 尽管我已将嵌套显示为遵循精确的模式，但生成的代码is/could嵌套在anylevel...因此我不能只做 .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;
  }
});

The .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;
    }
  }
}

在点击处理程序中，尝试以下操作：

Example: http://jsfiddle.net/QVphP/ 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/index/
• http://api.jquery.com/eq/ http://api.jquery.com/eq/