0

我有一段 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 的数组？本质上，当用户点击服务 1 时，返回的索引应该是 0，而不是 1。现在，索引 0 引用 servicesHeader div。

我也试过这个：

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

任何帮助，将不胜感激！

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

再说一遍，我如何只获取父 UL 的索引，而不管存在哪些其他兄弟元素？

4

4 回答 4

1

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

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

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

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

于 2012-05-08T20:02:23.443 回答
1

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

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

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

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

于 2012-05-10T13:27:25.787 回答
0

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

编辑：

试试这个：

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

演示

于 2012-05-08T20:01:32.830 回答
0

有什么问题：

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

见http://jsfiddle.net/u4Hy4/

于 2012-05-08T20:11:49.213 回答