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

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

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

//取得第一個同級元素
$.fn.first = function()
{
    return this.parent().children(":first");
}
//取得最後一個同級元素
$.fn.last = function()
{
    return this.parent().children(":last");
}
//由索引值取得任一個同級元素，索引值從0開始
$.fn.eq = function(eIdx)
{
    return this.parent().children(":eq("+ eIdx +")");
}

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

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

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

<div>
<ul id="ul1">
<li id="item1">項目一</li>
<li id="item2">項目二</li>
<li id="item3">項目三</li>
<li id="item4">項目四</li>
<li id="item5">項目五</li>
</ul>
</div>

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

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