jquery select one item from li using class name -

i have ul>li structure using jquery mobile looks 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 price of item when click specific li.i classes because easier expand afterwards.

$(document).ready(function(){     $(".fooddrinkitem").click(function(){         var price = $(".fooddrinkprice").text();         $("#popupfooddrinkprice").text(price);     }); }); 

how can take classname.text() of selected li?

working example: http://jsfiddle.net/gajotres/vwkm9/

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

and have 2 errors in structure:

this:

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

should this:

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

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

and p tag not closed.