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元素,然后通过循环它们来创建一个对id引用的对象.现在你可以拼接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));

在这个小提琴中查看上面的方法.