Question

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

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>

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

但有2个问题。

我只想选择DOM中比我当前节点更远的“foo”元素（例如“之前的”foo，并且不需要当前的foo）
虽然我已将嵌套显示为以下精确模式，但生成的代码可能嵌套在任何级别。 ..因此我不能只做.parent（）。parent（）。parent（）。siblings（）。find（）... etc。

如果您可以想象每次浏览器向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;
  }
});

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

目前我能想到的唯一解决方案是优雅的，并且在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

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

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

Answer 2

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

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

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

例如：

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

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

Answer 3

结帐this jsfiddle。点击任何带有红色边框的图片（foo），下一个红色边框（下一个foo）将变为黄色。

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

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

3 个答案: