jquery select one item from li using class name

Question

I have a ul>li structure using jQuery Mobile that looks like this:

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

I want to get the price of the item when I click the specific li.I would like to do this with classes because its easier to expand afterwards.

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

How can I take the className.text() of the selected li?

Answer 1

Working example: http://jsfiddle.net/Gajotres/VWkm9/

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

And you have 2 errors in your structure:

This:

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

Should be this:

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

data-role="listview" must be placed inside an ul tag, without it listview will no be styled properly.

And your p tag is not properly closed.

Answer 2

If I understand you correctly, this will do the trick:

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

Answer 3

You are referencing a nonexistent class called .price in your code execution. You should give each <li> a unique ID and reference them by that.