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

【问题标题】：jquery select one item from li using class namejquery使用类名从li中选择一项
【发布时间】：2013-05-18 18:23:24
【问题描述】：

我有一个使用 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()？

【问题讨论】：

标签： jquery jquery-mobile jquery-mobile-listview

【解决方案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>

而且你的 p 标签没有正确关闭。

【讨论】：

这似乎工作得很好。为什么？$(this) 是指我要求的选定项目吗？任何学习 jQmobile 的好链接将不胜感激。我会尽快标记问题正确尽我所能。
$(this)（或 self）是一个关键字，可以在实例方法中使用，以引用当前正在执行的方法已被调用的对象。要了解更多信息，请查看此链接：remysharp.com/2007/04/12/jquerys-this-demystified。现在关于链接，您目前的最佳解决方案是 jQM 官方文档：view.jquerymobile.com/1.3.0 和 api：api.jquerymobile.com，其他一切都是零散的。另请查看我的个人资料和我的答案，我主要回答 jQM 问题，因此您很有可能会在那里找到答案。 :)
另外，我建议您看看我的其他两个答案。第一个讨论了为什么不应该使用 jQuery Mobile 准备好的文档以及什么是合适的替代品：stackoverflow.com/a/14469041/1848600。第二篇讨论 jQM 小部件以及如何动态使用它们：stackoverflow.com/a/14550417/1848600

【解决方案2】：

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

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

【讨论】：

这也可以，但我不确定我们是否看到了所有代码。
但我不想要所有 li.的 text()。只是特定 li.FoodDrinkItem 的 .FoodDrinkPrice.text()
你注意到我的编辑了吗？ find 调用将在相关 li 的后代中查找价格。

【解决方案3】：

您在代码执行中引用了一个名为.price 的不存在的类。你应该给每个<li> 一个唯一的ID，并以此来引用它们。

【讨论】：