如何获取在ListView JQUERYMOBILE中选择的元素的索引

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.

请帮我解决这个问题.

谢谢Shyam

Answer 1

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

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

这会将事件处理程序绑定到列表中的#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元素中,因为很容易确定单击元素的索引,但您也可以绑定到列表中的链接:

$('#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