JQuery выбрать один элемент из Li, используя имя класса

Question

У меня есть структура уль> Li с помощью JQuery Mobile, который выглядит следующим образом:

<div> 
<ul data-role="listview"> 
    <li><a href="#" class="FoodDrinkItem">Hamburger<p class="FoodDrinkPrice">$9.00</p></a></li> 
    <li> <a href="#" class="FoodDrinkItem">Club Sandwich<p class="FoodDrinkPrice">$7.00</p></a></li> 
</ul> 
</div> 

Я хочу, чтобы получить цену товара, когда я нажимаю на конкретный Ли. Я хотел бы сделать это с помощью классов, потому что его легче расширять впоследствии.

$(document).ready(function(){ 
    $(".FoodDrinkItem").click(function(){ 
     var price = $(".FoodDrinkPrice").text(); 
     $("#PopupFoodDrinkPrice").text(price); 
    }); 
}); 

Как я могу взять className.text() из выбранного LI?

Answer 1

Рабочий пример: http://jsfiddle.net/Gajotres/VWkm9/

$(document).on('click', 'ul li', function(){ 
    alert($(this).find('.FoodDrinkPrice').text()); 
});  

И у вас есть 2 ошибки в вашей структуре:

Это:

<div data-role="listview"> 
<ul> 

Должно быть так:

<div> 
<ul data-role="listview"> 

data-role="listview" должны быть размещены внутри ul тега, без него listview не будет должным образом оформлены.

И ваш тэг p неправильно закрыт.

Answer 2

Вы ссылаетесь на несуществующий класс под названием .price в вашем коде. Вы должны дать каждому <li> уникальный идентификатор и ссылаться на него.

Answer 3

Если я вас правильно понял, это будет делать трюк:

$(this).find(".FoodDrinkPrice").text()