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

我不想承认这一点，但我一直在想怎么做

e、 g.假装你有以下结构：

<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中显然不存在

.getIndexidom（）

方法。。。但我很好奇，是否有人有一个解决方案来获得我所追求的“下一个”元素

目前我能想到的唯一解决方案是真正的优雅，如果在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;
    }
  }
}

//使用普通JavaScript
var thisImg=当前图像的大小//对DOM元素的一些引用
var=false；
对于（var i=0；i签出。它正是您想要的

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


如果希望获取当前选定项之后的所有项，并且知道它在DOM中的位置，则可以使用选择“大于”自身的所有项

例如：

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

将返回所有“大于”所选内容中第四项的项目（又名，之后，而不是当前项目）。
在单击处理程序中，尝试以下操作：

示例：（单击蓝色框向下一个框添加边框）




签出。单击任何带有红色边框（
foo
）的图像，下一个红色边框（下一个
foo
）将变为黄色

取决于页面中有多少个
foo
，此解决方案可能会对性能造成一定的影响。但由于您还没有使用1.4，这将起作用。
next（）
只搜索兄弟姐妹，我想？JasCav-
。next（）
只对兄弟姐妹有效。请再次阅读问题。OP声明“我在与上面突出显示的“foo”节点相关的jQuery事件处理程序中。”突出显示的
.foo
没有同级。需要某种向上遍历。：o）@JasCav-根据文档。next（）只遍历当前节点的同级（在我的示例中，它只会找到“next 1”…如果“next 1”如果不在那里，它就找不到“下一个2”或“下一个3”）@scunliffe@patrick@Isaac-你们都是对的：-（我失败了。更新了我的答案。我认为这是正确的（我以前用过它来解决类似的问题。）我不是世界上最好的jQuery er。我也在学习。谢谢你的更正。嗯，.gt（）可能在这里起作用…我仍然需要先遍历整个集合，以找到我的“当前”索引，尽管我猜。太棒了！索引（）这正是我在这里需要的…如果我使用jQuery v1.4，我会立即跳到它上面；-）但是，唉，我还没有到那里，所以我需要自己循环一点来获取索引。@scunliffe-传递DOM元素时不需要jQuery 1.4（如上面的示例所示）。
.index（）
的另外两种用法需要1.4：o） 下面是相同的示例，但使用jQuery 1.3.2来代替：哦，伙计，我盯着我的代码看太久了，你说得对。jQuery 1.0中支持索引（元素）并支持将修复添加到我的修复中；-）Nate-OP错误地认为需要1.4。您的解决方案是可行的，但实际上不需要使用
.data（）
来使用如此复杂的东西。下面是更新的示例：它只使用
==
来比较DOM元素：o）
$('img.foo:gt(4)')

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