Question

I have the following code in jQuery Mobile :

<ul data-role="listview" data-theme="d" id="#listview" data-divider-theme="d">
    <li data-role="list-divider" class="name">Mr. Sam</li>
            <li data-icon="false" class="details">
                       <a onclick="getInfo()">

And on my onclick, I want to access the Mr. Sam. Here’s the following code I’m trying in the JS:

var info = $(this).parent().parent().text();

Because, I’m clicking on <a>, it’s parent is <li>, and it’s parent is <li> containing Mr. Sam. But I’m doing something wrong, as alert(info); alerts a blank output.
What do I need to change? I’ve even tried, .html().

Answer 1

In your markup the target li is not grand-parent of the clicked element, it’s previous sibling of the parent element:

<li data-role="list-divider" class="name">Mr. Sam</li>
                                               ---^

You can use prev method:

var info = $(this).parent().prev().text(); 

Also note that in your code this refers to window object, you can pass this to your function:

<a onclick="getInfo(this)">

function getInfo(elem) {
   var info = $(elem).parent().prev().text(); 
}

http://jsfiddle.net/F8wt8/

Since you are using jQuery (after removing # from uls ID attribute) instead of onclick attribute you can use click method.

$('#listview li.details a').click(function(event){
   event.preventDefault();
   var info = $(this).parent().prev().text();
   // console.log(info);
})