JQuery выбор.Найти элемент за другим

Question

<li>
  <select id="foo"></select>
</li>
<li>
  <select id="bar"></select>
</li>
<li>
  <select id="baz"></select>
</li>

var select_after = function(src){
   //How get all select elements after the one specified as argument ?
}

Как написать этот метод?

select_after($("#foo")) 

должен возвращать элементы #bar и #baz в массиве

select_after($("#bar"))

должен вернуть элемент #baz в массиве

select_after($("#baz")) 

должен вернуть пустой массив

Как мне написать этот метод?

Answer 1

Для простого однострочного вы можете использовать следующую цепочку:

$("#foo").parent().nextAll().children("select");

Приведенный выше код сначала выберет родителя, который является элементом li, а затем выберет всех следующих братьев и сестер.после этого, и, наконец, вернуть select элементы внутри.Как видно из этой скрипки .

Однако этот метод громоздкий и медленный, так как вы ходите по DOM.Другой метод, который я предпочитаю использовать, потому что он работает намного быстрее при работе с большим набором элементов:

Предварительный выбор всех элементов select, затем создайте объект со ссылками на идентификатор индекса, зациклив их.Теперь вы можете просто соединить объект jQuery, чтобы получить элементы, которые следуют после (или до).

// Preselect select elements
var selects = $("ul > li > select"),
    // Prepare empty object to hold index reference
    idx = {};

// Loop through the select elements and build index reference
selects.each(function(i){idx[this.id] = i;});

// Get select elements after #foo
console.log(selects.slice(idx.foo+1));

// Get select elements before #baz
console.log(selects.slice(0, idx.baz));

Проверьте описанный выше метод в this fiddle .