為jQuery擴充功能，得到DOM同級元素

jQuery提供簡單易用的DOM操作能力，讓我們可以專注於Javascript程式的邏輯而不用去理會煩人的DOM操作、瀏覽器相容等問題。
我們可以利用next()來取得同級的下一個元素，利用prev()來取得同級的上一個元素，但是jQuery並無直接由函數提供取得同級的第一個元素、同級的最後一個元素、同級的任一元素，因此我們可以利用jQuery強大的Selector（選擇器）達成這樣的需求，並替jQuery擴充功能。

擴充jQuery的功能函數，把以下程式碼加入JQuery中

view plain copy to clipboard print ?

1. //取得第一個同級元素  
2. $.fn.first = function()  
3. {  
4.     return this.parent().children(":first");  
5. }  
6. //取得最後一個同級元素  
7. $.fn.last = function()  
8. {  
9.     return this.parent().children(":last");  
10. }  
11. //由索引值取得任一個同級元素，索引值從0開始  
12. $.fn.eq = function(eIdx)  
13. {  
14.     return this.parent().children(":eq("+ eIdx +")");  
15. }  

使用範例 – 利用jQuery擴充操作DOM，取得同級的第一個元素、同級的最後一個元素、同級的任一元素：

view plain copy to clipboard print ?

1. $(function()  
2. {  
3.     alert($("#item3").first().attr("id"));//顯示item1（同級的第一個元素）  
4.     alert($("#item3").last().attr("id"));//顯示item5（同級的最後一個元素）  
5.     alert($("#item3").eq(1).attr("id"));//顯示item2（同級的任一元素）  
6. });  

以上範例需搭配以下HTML內容

view plain copy to clipboard print ?

1. <div>  
2. <ul id="ul1">  
3. <li id="item1">項目一</li>  
4. <li id="item2">項目二</li>  
5. <li id="item3">項目三</li>  
6. <li id="item4">項目四</li>  
7. <li id="item5">項目五</li>  
8. </ul>  
9. </div>  

關於Selector可進一步參考官方提供的jQueryAPI詳細的說明及範例：
API/1.2/Selectors

在簡睿隨筆中也有中文一覽表及說明：
jQuery神奇的選擇器(Selector)