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

我讨厌承认它，但我一直试图弄清楚如何做到这一点。

例如假装你有以下结构：

 https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/... 
 
 
  
 
  
 
  
 
  
 
  
 
 
 https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/... 
 
 
  
 
  
 
  
 
  
 
 
  

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

但是有2个问题。

1. 我只想选择DOM中比我当前节点更远的“foo”元素（例如“之前的”foo，并且不需要当前的foo）
2. 虽然我已经将嵌套显示为精确模式，但生成的代码可以嵌套在任何级别https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…因此我不能只做.parent（）。parent（）。parent（）。siblings（ ）.find（）https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…等

如果你可以想象每次浏览器向DOM添加一个节点时，它会递增一个计数器，并为索引分配https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…你可以检索https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…我想要的是：

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

.getIndexInDOM()方法显然在jQuery中不存在https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…但我很好奇是否有人有解决方案来获取我所追求的“下一个”元素。

我现在能想到的唯一解决方案是非常优雅的，并且在DOM的后半部分中会表现得非常糟糕https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…https://stackoverflow.com/questions/3702094/jquery-to-get-next-match-in-the-dom-after-a-particular-element/…

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

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

示例： 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 2

退房吧。 它完全符合你的要求。

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

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

例如：

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

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

Answer 3

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

根据您在页面中拥有的foo ，此解决方案可能会受到一点性能影响。 但是既然你还没有上1.4，那就行了。