Question

我正在尝试获取

中当前项目的索引

<ul id="navbar">
    <li><a href="#a">Link</a></li>
    <li><a href="#b">Link</a></li>
    <li><a href="#c">Link</a></li>
    <li><a href="#d">Link</a></li>
    <li><a href="#e">Link</a></li>
</ul>

我正在使用jQuery并通过简单地使用

获得总数

$('ul#navbar').children().length;

如何获取与父元素相关的当前索引？

例如。单击第三个链接，返回3，如果是数组，则返回2。

我已经尝试了以下内容但是仍然没有找到返回-1

$('ul#navbar a').click(function(){
    var curPos = $(this).parent().parent().index($(this).parent());
});

编辑：将javascript中的ul.navbar更改为ul＃navbar，道歉

Answer 1

在父index()元素上使用li方法

var curPos = $(this).parent().index();

http://api.jquery.com/index/

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

Answer 2

$(function() {
    $('ul#navbar a').click(function(){
        var curPos = $(this).parent().index();
    });
});

应该这样做。

Answer 3

在您的代码中，您尝试访问ul.navbar，但ul没有名为navbar的类。要按ID访问它，请使用ID选择器#

此外，您只需要使用index()获取与其兄弟姐妹相关的当前元素的索引。使用.parent()获取li，然后访问该索引。

$('ul#navbar a').click(function(){
    var curPos = $(this).parent().index();
    console.log(curPos);
});

示例：http://jsfiddle.net/jonathon/SyvZ5/

Answer 4

如果导航栏中没有其他锚点，

$('#navbar a').click( function () {
    var curpos = $('#navbar a').index(this);
});

如果您有嵌套锚点（如导航栏中常见的那样），则会执行以下操作：

$('#navbar>li>a').click( function () {
    var curpos = $('#navbar>li>a').index(this);
});

如何使用jQuery获取与父元素相关的当前项的索引？

4 个答案: