代码之家 › 专栏 › 技术社区 › scunliffe

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

hierarchy jquery-selectors dom jquery javascript

scunliffe · 技术社区 · 14 年前

我不想承认,但我一直在想怎么做。

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" 上面的节点。我想找到“下一个” img “福”

但是有两个问题。

我只想选择DOM中比我所在的当前节点更远的“foo”元素(例如,不需要“previous”foo和当前foo)
虽然我已经按照一个精确的模式展示了嵌套,但是生成的代码 是/可以 嵌套在任何

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

3 回复 | 直到 14 年前

user113716 14 年前

在click处理程序中,尝试以下操作:

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

JasCav 14 年前

~~退房 next . 它正是你想要的。~~

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

gt selector 选择所有“大于”本身的项目。

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

将返回所有“大于”所选内容中第四项的项目(即,后面的项目,而不是当前项目)。

Nate Pinchot 14 年前

退房 this jsfiddle foo )下一个红色边框(下一个 )将变为黄色。

如果您在页面中看到,此解决方案可能会对性能有点影响。但由于您还没有使用1.4,这将起作用。