jQuery, чтобы получить следующее совпадение в DOM после определенного элемента

Question

Ненавижу признаться, но я застреваю, пытаясь понять, как это сделать.

например. делая вид, что у вас есть следующая структура:

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

Однако есть 2 проблемы.

1. Я только хочу, чтобы выбрать элементы «Foo», которые далее в DOM, чем текущий узел я на (например, «предыдущий» Foo, и текущий Foo не требуется)
2. Хотя Я показал вложенность как следующий точный шаблон, сгенерированный код есть/может быть вставлен в любой уровень ... таким образом, я не могу просто выполнить .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; 
    } 
}); 

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

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

Заканчивать 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, это будет работать.