jQuery的指數（）返回列表

Question

動態變化後的值相同，我有以下一段HTML的

<a id="zoom" href="...">zoom current artwork</a> 

<div id="album-artwork"> 
    <ul> 
     <li><a class="current">image 1</a></li> 
     <li><a>image 2</a></li> 
     <li><a>image 3</a></li> 
     <li><a>image 4</a></li> 
     <li><a>image 5</a></li> 
    </ul> 
</div> 

當我點擊id爲「縮放」的鏈接，我想在索引'album-artwork'列表中包含類'current'的標籤'a'。所以我在jQuery中做了以下工作，它完美的工作！

// ZOOM artwork 
$("#zoom").click(function(e) { 

    // highlight 
    var index = $('#album-artwork ul li a.current').index(); 
    alert(index); 

    e.preventDefault(); 
} 

現在，這是它不工作！當我運行另一個jQuery代碼更改標籤「A」在「專輯，作品」 ......像這樣的類：

$('#album-artwork a').click(function(e) { 

    // add decoration 
    $("#album-artwork a").removeClass('current'); 
    $(this).addClass("current"); 

    e.preventDefault(); 
}); 

前面的代碼，即與標籤獲取索引的一個「一'與類'當前'，不斷返回相同的價值......好像它沒有看到我只是在標記'a'中更改類'current'

爲什麼會這樣？它怎麼沒有看到變化？

感謝

Answer 1

要查詢的層次結構中的錯誤方式：a標籤始終是封閉li的第一個（也是唯一一個）的後裔，因此指數0是總是正確的。只是不查詢一個，但直接查詢li：

<div id="album-artwork"> 
    <ul> 
    <li>image 1</li> 
    <li>image 2</li> 
    <li>image 3</li> 
    <li>image 4</li> 
    <li class="current">image 5</li> 
    </ul> 
</div> 

而對於JavaScript的：

$("#zoom").click(function(e) { 
    var index = $('#album-artwork ul li.current').index(); 
    alert(index); 
    e.preventDefault(); 
}); 
$('#album-artwork li').click(function(e) { 
    $("#album-artwork li").removeClass('current'); 
    $(this).addClass("current"); 
    e.preventDefault(); 
}); 

Answer 2

你的情況<a>標籤是<li>標籤內的第一要素，所以.index()是返回一個正確的值：0.你必須使用<li>標籤來得到你想要的。所以，你可以在<li>標籤使用.addClass('current')，或<a>標籤一樣使用.parent()：

$("#zoom").click(function(e) { 
    var index = $('#album-artwork ul li a.current').parent().index(); 
    alert(index); 
    return false; 
}); 
$('#album-artwork a').click(function(e) { 
    // add decoration 
    $("#album-artwork a").removeClass('current'); 
    $(this).addClass("current"); 
    return false; 
});