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> s的唯一有效子项是<li> s。

Answer 2

.index()可以返回0的另一个原因是，如果你这样使用它：

$('matched elements').click(function(){
    console.log($(this).index()); // will be 0 in some cases
});

正确的方式：

$('matched elements').click(function(){
    console.log($('matched elements').index($(this))); // will be the index within set of matched elements
});

Answer 3

你的锚元素没有任何兄弟姐妹，所以它们都是索引0.它们都嵌套在自己的<ul>中，如果我没弄错的话，它是无效的标记而没有包含{{ 1}}围绕锚点。

我会将您的HTML更改为：

<li>

你和JS对此：

<div id="nav">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </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>

Working example

为什么.index（）总是返回0

3 个答案: