jQuery index（）在列表中动态更改后返回相同的值

我有下面一段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>

现在，如果它不起作用的话，这是真的！当我运行另一个jQuery代码来更改“album artwork”中标记“a”中的类时。。。像这样：

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

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

   e.preventDefault();
});

前面的代码，即获取带有标记“a”和类“current”的索引的代码，会不断返回相同的值。。。好像它没有看到我只是在标记“a”中更改了类“current”

为什么呢？为什么它看不到变化

---

感谢您以错误的方式查询层次结构：

a

标记始终是封闭的

li

的第一个（也是唯一一个）后代，因此索引

0

始终是正确的。不要查询a，直接查询

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>

您案例中的

标记是

标记中的第一个元素，因此

.index（）

正在返回正确的值：0。你必须使用

标签才能得到你想要的东西。因此，您可以在

标记上使用

.addClass（'current'）

，或者在

标记上使用

.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;
});

$("#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();
});

$("#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;
});