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

Выезд следующий .Он делает именно то, что вы хотите.

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

Если вы хотите получить все элементы после выбранного в данный момент элемента И вы знаете, какая позиция в вашей DOM, вы можете использовать gt selector для выбора всех элементов "больше, чем" сам.

Например:

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

вернет вам все элементы, которые "больше чем"4-й пункт в выборе (AKA, после, а не текущий).

Answer 3

Проверьте этот jsfiddle .Щелкните любое изображение с красной рамкой (foo), и следующая красная граница (следующая foo) изменится на желтую.

В зависимости от того, сколько foo с у вас на странице,Решение может быть немного хит производительности.Но поскольку вы еще не используете 1.4, это сработает.