jQuery最後一個孩子未定義問題

Question

我有一個問題，使用jQuery獲取我最後一個孩子的ID。

這裏是我的代碼有問題：http://jsfiddle.net/2ePeP/

我的HTML代碼

<div> 
    <p class="category" id="category_1">Appetizer</p> 
    <p class="category" id="category_2">Beaverages</p> 
    <p class="category" id="category_3">Dessert</p> 
    <button type="button" class="add-category">Add</button> 
</div> 

我的JavaScript代碼

$('.add-category').click(function() { 
    alert($('.category:last-child').attr('id')); 
}); 

任何幫助將不勝感激！

Answer 1

使用:last或.last()

$('.category:last'); 

或

$('.category').last() 

DEMO

Answer 2

.last-child將只嘗試父元素的最後一個子匹配 - 見MDN :last-child，但<button>是父母<div>中的最後一個孩子。 class="category"也沒有元素，也是最後一個孩子。

CSS確實提供了一種選擇，將工作，它匹配

指定的元素最後出現的位置，即使它不來在HTML墊底。

（從CSS技巧:last-child）

所以下面將記錄的最後一個class="category"元素的id。

$('.add-category').click(function() { 
    console.log($('.category:last-of-type')[0].id); 
});