jquery-mobile - JQUERYMOBILE如何获取ListView选中元素的索引

Question

我创建了一个动态 listview，其中包含一个带有 id="a" 的链接。

<ul id="accpmenu" data-role="listview" >
</ul>

$("#accpmenu").append('<li><a href='+ "#" + ' id="a" ">'+ this.textContent +'</a>  </li>');

现在我想确定我从这个 listview 中点击的元素的索引。

$("#a").live("click",function(e)
{
    //What should i write here to get the selected index?.
}

我想要基于此的索引号我需要加载动态 XML。

请帮我解决这个问题。

谢谢希亚姆

Answer 1

$('#accpmenu').on('click', ' > li', function () {
    var selected_index = $(this).index();
});

这是一个演示:http://jsfiddle.net/w2JZU/

这会将事件处理程序绑定(bind)到 #accpmenu 列表中的列表项，用于 click 事件找到被点击列表项的索引(与其他列表项元素)。

在旁注中，您的代码中似乎有一些无效的 HTML:

$("#accpmenu").append('<li><a href='+ "#" + ' id="a" ">'+ this.textContent +'</a>  </li>');

应该更改为(注意 id 属性后删除的双引号):

$("#accpmenu").append('<li><a href='+ "#" + ' id="a">'+ this.textContent +'</a>  </li>');

我上面的示例将 click 事件处理程序添加到 li 元素，因为很容易确定被单击元素的索引，但您也可以绑定(bind)到列表:

$('#accpmenu').on('click', 'a', function () {

    //this gets the index by finding the first parent list-item element and getting it's index compared do its siblings
    var selected_index = $(this).parents('li').eq(0).index();
});

请注意 .on() 是 jQuery 1.7 中的新内容，在上述情况下替换了 .delegate()(来自早期版本)。

这里有一些文档可以帮助你解释上面的例子:

• .on():http://api.jquery.com/on
• .index(): http://api.jquery.com/index
• .parents(): http://api.jquery.com/parents