jquery - 获取父母父母的文字？

Question

我在 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()">

而在我的onclick，我想访问Mr. Sam. 这是我在 JS 中尝试的以下代码：

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

因为，我点击<a>，它的父级是<li>，它的父级<li>包含 Mr. Sam。但我做错了什么，因为alert(info);警告一个空白输出。我需要改变什么？我什至试过，.html().

Answer 1

在您的标记中，目标li不是单击元素的祖父元素，而是父元素的前一个兄弟元素：

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

您可以使用prev方法：

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

另请注意，在您的代码中this引用窗口对象，您可以传递this给您的函数：

<a onclick="getInfo(this)">

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

http://jsfiddle.net/F8wt8/

由于您使用的是 jQuery（#从uls ID 属性中删除后）而不是onclick属性，因此您可以使用click方法。

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