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

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 将保持在同一级别并具有 serviceLink 类。

同样，我如何仅获取父 UL 的索引，而不管存在哪些其他同级元素？

Answer 1

除非我忽略了您的要求中的某些内容，否则这符合要求吗？

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

这将在您单击服务 1 时返回 0，当您单击服务 2 时返回 1。

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

Answer 2

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

我已经习惯了只使用 index() 本身，以至于我忘记了你可以给它添加限定符。另外，我假设（并告诉所有回答者）我必须从单击的元素向后工作并找到它的位置。相反，我所做的是基于我知道不会更改的内容（容器 div ID 和每个链接周围的结构）构建一个元素列表，然后从那里获取单击元素的索引：

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

感谢大家帮助我解决这个问题。

Answer 3

有什么问题：

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

见http://jsfiddle.net/u4Hy4/

Answer 4

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

编辑：

试试这个：

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

DEMO