Question

我有一段html，当JQM完成后，看起来像这样（简化）：

<div id="servicesList">
    <div id="servicesHeader">Services</div>
    <ul data-role="listview" class="ui-listview">
        <li id="Serv1" class="serviceLink">Service 1</li>
    </ul>
    <ul data-role="listview" class="ui-listview">
        <li id="Serv2" class="serviceLink">Service 2</li>
    </ul>
</div>

此代码是从另一段脚本动态生成的。

每个服务都附加了一个点击事件，可以动态地提取更多数据。理想情况下，我希望能够在点击它时引用服务的索引。这是我目前的代码：

$('.serviceLink').click(function() {
    var index = $(this).closest("ul").index();
    servAnimate(index);
});

显然，这不起作用，因为引入的对象数组包含servicesHeader div。我如何才能获得父级ul的数组？基本上，当用户点击Service 1时，返回的索引应为0，而不是1.现在，索引0引用servicesHeader div。

我也试过这个：

$(this).closest("ul").filter("ul").index();

任何帮助将不胜感激！

编辑：我应该指定HTML是由另一个开发人员的脚本生成的。它可能会改变，也可能保持不变。到目前为止，我唯一的保证是UL将保持在同一级别，并将拥有class serviceLink。

再说一次，我怎样才能获得父UL的索引，而不管其他兄弟元素是什么？

Answer 1

除非我忽略了你的要求，否则这是否符合要求？

$(function() {
    $('#servicesList .serviceLink').on('click', function() {
        alert($('.serviceLink').index(this));
    });
})

单击“服务1”时将返回0，单击“服务2”时返回1.

UPDATE ：这只会在主div“servicesList”中找到“.serviceLinks”

Answer 2

引入另一个DIV包装服务列表 - 即UL。然后，.closest('div')将找到这个新的div，索引将在其中从零开始。

编辑：

试试这个：

$("#servicesList").on('click', 'ul', function() {
    var index = $(this).siblings("ul").andSelf().index(this);
    alert(index);
});

<强> DEMO

Answer 3

有什么问题：

$('.serviceLink').click(function() {
    var index = $(this).closest("ul").index() - 1;
    alert(index);
});

请参阅http://jsfiddle.net/u4Hy4/

Answer 4

感觉就像一个失败者回答我自己的问题！

我习惯只使用index（），我忘了你可以添加限定符。另外，我假设（并告诉所有的回答者）我必须从点击的元素向后工作并找到它的位置。我所做的是基于我知道不会改变的事物（容器div ID和直接围绕每个链接的结构）构建元素列表，并从那里获得被点击元素的索引：

$('.serviceLink').click(function() {
    var index = $('#servicesList ul[data-role="listview"] li.serviceLink').index(this);
    servAnimate(index);
});

我非常感谢能够帮助你解决这个问题。

jQuery和JQM - 使用最近的过滤器来获取索引

4 个答案: