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元素。如this fiddle所示。

但是，此方法既笨重又緩慢，因爲您正在走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)); 

查看上述方法this fiddle。