Problème non défini de jQuery last-child - javascript, jquery, css-selectors

J'ai un problème pour obtenir l'ID de mon dernier enfant avec jQuery.

Voici mon code en cause: http://jsfiddle.net/2ePeP/

Mon code 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>

Mon code JavaScript

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

Toute aide est la bienvenue!!!

Réponses:

4 pour la réponse № 1

Utilisation :last ou .last()

$(".category:last");

ou

$(".category").last()

DEMO

---

0 pour la réponse № 2

.last-child essaiera seulement de faire correspondre le tout dernier enfant d'un élément parent - voir MDN :last-child, mais le <button> est le dernier enfant du parent <div>. Il n'y a aucun élément avec class="category" c'est aussi un dernier enfant.

CSS fournit un sélecteur qui fonctionnera, qui correspond à

la dernière occurrence d'un élément spécifié, même s'il ne vient pas en dernier dans le code HTML.

(de CSS Tricks :last-child)

Donc, ce qui suit enregistrera le id du dernier class="category" élément.

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

---