Question

我需要获取点击列表项的索引号，这可能嵌套在另一个UL中。

除了嵌套的UL之外，代码工作正常。由于您同时点击了父项和子项LI，因此返回两个结果。当我尝试使用锚标记而不是LI时，结果为-1，因为锚在LI内部。

代码：

(function($) {
    var manifest = $('#manifest li');
    manifest.click(function(e){
        $(this).addClass("active");
        manifest.not(this).removeClass('active');
        var selected = $(".active");
        var pos = manifest.index(selected);
        alert (pos);
    });

 }) ( jQuery );

我正在尝试压缩层次结构以创建顺序导航（幻灯片显示和键绑定将绑定到此索引号）。所以我想要的数字基本上就是LI的数量，如果列表是平的。

谢谢！

Answer 1

事件传播到其父级。您需要停止传播，您可以使用e.stopPropagation()，以便它也不会导航到其父级的click事件（这会导致多个警报）。

manifest.click(function (e) {
        e.stopPropagation();

.....

尝试：

(function ($) {
    var manifest = $('#manifest li');
    manifest.click(function (e) {
        var $this = $(this),
            pos;
        e.stopPropagation();
        manifest.find('.active').not($this.children('a').addClass("active")).removeClass('active');
        pos = manifest.index($this);
        alert(pos);
    });
})(jQuery);

<强> Demo

此外，如果您在li上应用活动，它也将覆盖其所有孩子的样式，相反，您可以在锚点上应用样式，如果您希望锚点覆盖整个宽度，只需提供锚点的样式作为display:block

li > a{
    display:block;
}

<强> Demo

jquery顺序导航

1 个答案: