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>s<li>です。

于 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 に答える