7

我对为什么 .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/

4

3 回答 3

11

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

尝试获取<ul>' 索引。

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

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

于 2012-08-02T18:31:01.523 回答
6

.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
});
于 2013-09-05T19:46:53.927 回答
3

您的锚元素没有任何兄弟姐妹，因此它们的索引均为 0。它们都嵌套在自己的<ul>中，如果我没记错的话，这是<li>在锚点周围不包含的无效标记。

我会将您的 HTML 更改为：

<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>

而你 JS 对此：

$('.parent  div').hide();

$('#nav a').click(function() {
    // Notice, I'm going up to the parent <li> and then calling index().
    var $div = $('.parent > div').eq($(this).parent().index());
    $div.show();
    $('.parent > div').not($div).hide();
});​

工作示例

于 2012-08-02T18:33:29.840 回答