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?

score 2 · Answer 1 · answered May 18 '13 at 18:28

2

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

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

answered May 18 '13 at 18:28

milosz

865
2
7
24

This could work too, but I’m not sure we are seeing all the code. – Phillip Berger May 18 '13 at 18:30
But i dont want the text() of all the li.Just the .FoodDrinkPrice.text() of the specific li.FoodDrinkItem – Leonidas May 18 '13 at 18:31
Have you noticed my edit? The find call will look for the price in the relevant li's decendants. – milosz May 18 '13 at 18:34

score 2 · Accepted Answer · answered May 18 '13 at 18:30

2

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.

answered May 18 '13 at 18:30

Gajotres

57,309
16
102
130

This seems to be working perfectly.Why though?Is `$(this)` means the selected item that i am asking for?Any good links for learning jQmobile would be appreciated.I will flag the question correct as soon as i can. – Leonidas May 18 '13 at 18:37
$(this) (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked. To find out more take a look at this link: http://remysharp.com/2007/04/12/jquerys-this-demystified/ . Now regarding links, your BEST solution currently is jQM official documentation here: http://view.jquerymobile.com/1.3.0/ and api here: http://api.jquerymobile.com/ , everything else is to fragmented. Also take a look at my profile and my answers, I answer mostly jQM questions so there's a good chance you will find your answer there. :) – Gajotres May 18 '13 at 18:43
Also I would advise you to take a look at two of my other answers. First one talks about why you should not use document ready with jQuery Mobile and what is a proper replacement: http://stackoverflow.com/a/14469041/1848600 . Second one talks about jQM widgets and how to use they dynamically: http://stackoverflow.com/a/14550417/1848600 – Gajotres May 18 '13 at 18:45

score 0 · Answer 3 · answered May 18 '13 at 18:28

0

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.

answered May 18 '13 at 18:28

Phillip Berger

2,317
1
11
30

jquery select one item from li using class name

3 Answers3