javascript - 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()

デモ

Answer 2

.last-childは、親要素の最後の子のみを照合しようとします - MDN:last-childを参照してください。しかし、<button>は親の最後の子<div>です。class="category"最後の子でもある要素はありません。

CSS は機能するセレクターを提供しますが、これは一致します

指定された要素が HTML で最後に出現しなくても、最後に出現した要素。

（CSSトリックスより:last-child）

したがって、以下はid最後のclass="category"要素のログを記録します。

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