Question

我有一个使用jQuery Mobile的ul＆gt; 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

如果我理解正确，这将解决问题：

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

Answer 2

工作示例：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 3

您在代码执行中引用了一个名为.price的不存在的类。您应该为每个<li>提供一个唯一的ID，然后通过它进行引用。

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

3 个答案: