jquery使用类名从li中选择一项

Question

我有一个使用 jQuery Mobile 的 ul>li 结构，如下所示:

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

我想在点击特定的li时获取商品的价格。我想通过类来实现这一点，因为这样以后更容易扩展。

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

如何获取所选 li的className.text()？

Answer 1

工作示例:http://jsfiddle.net/Gajotres/VWkm9/

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

你的结构中有两个错误:

这个:

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

应该是这样的:

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

data-role="listview" 必须放置在 ul 标签内，没有它listview 将无法正确设置样式。

并且您的 p 标签未正确关闭。