jquery - 为什么 .index() 总是返回 0

Question

我很困惑为什么 .index() 在这段代码中返回 0。它不应该返回在 jquery 对象数组中找到它的位置的索引吗？

<div id="nav">
       <ul><a href="#">Link 1</a></ul>
       <ul><a href="#">Link 2</a></ul>
       <ul><a href="#">Link 3</a></ul>
       <ul><a href="#">Link 4</a></ul>    
</div>
<div class="parent">
    <div class="a">
        <p>this is a</p>
    </div>   
    <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</div>

jQuery 代码

 $('#nav a').click(function() {
    console.log($(this).index());
    var $div = $('.parent > div').eq($(this).index());
    $div.show();
    $('.parent > div').not($div).hide();
});​

我必须使用 $(this).index('#nav a') 来获取正确的索引。

http://jsfiddle.net/HpCWW/2/

Answer 1

index总是0因为<a>是其父级中的第一个子级( <ul> )。

尝试获取<ul>的索引。

$(this).parent().index()

注意:您的 HTML 无效。 <ul>的唯一有效子代是 <li> s。