Javascript 从元素中删除类并添加到下一个元素

我有一个链接列表，其中一个类处于活动状态

在“我的下一步”按钮上，单击“id”以从当前元素中删除该类并将其添加到下一个元素，但我似乎无法将其添加

我做了一个小提琴，希望能解释我的问题，任何帮助都会很好，谢谢

---

jQuery最有用的便利之一是它的方法（通常）是可链接的——换句话说，它们返回调用它们的对象。所以你可以简单地写下：

$('ul.pagination').find('a.active').removeClass('active').closest('li')
                  .next('li').find('a').addClass('active');

。。。因为应该是“nexted”的

元素，而不是

元素。但事实上，如果“active”是最后一个有问题的元素，那么您不应该完全放弃它：

var $a      = $('ul.pagination').find('a.active'),
    $li     = $a.closest('li'),
    $nextLi = $li.next('li');

if ($nextLi.length) {
   $a.removeClass('active');
   $nextLi.find('a').addClass('active');
}

---

因为一旦你这么做了

$('ul.pagination').find('a.active').removeClass('active');

不再有

a.active

-已从该元素中删除

active

类名。所以重复相同的选择器

$('ul.pagination').find('a.active')//...

。。。将不选择任何内容

而是把它全部锁在一起

$('ul.pagination').find('a.active').removeClass('active').next('a').addClass('active');

---

你还有第二个问题。根据

next（）

的jQuery API，它将：

获取匹配元素集中每个元素紧跟其后的同级。如果提供了选择器，则仅当它与该选择器匹配时，才会检索下一个同级

您没有尝试获取以下兄弟姐妹：

<ul class="pagination">
    <li><a class="one active" href="#">X</a></li>
    <li><a class="two" href="#">X</a></li>
    <li><a class="three" href="#">X</a></li>
</ul>

<a href="" class="next">Next</a>
<a href="" class="prev">Prev</a>

---

您正在尝试获取整个文档中的下一个

。这更具挑战性——我不知道如何做到这一点。

这实际上是基于您的小提琴中的html结构所需要的

---

我会这样写，防止动作对最后一个li做任何事情

---

您的代码中有两个错误：

一旦删除，将无法再找到活动类

a标记嵌套在li标记中，因此next（）无法按预期工作

为了简化操作，可以将活动类附加到li标记

现场演示：

代码：

---

使用变量<代码>foo=$（）.find（）；foo.remove；foo.next（）.add，或其他东西（或将其链接起来）顺便问一下，当你排到列表的底部时，你想发生什么？@Jack-Ya，我发现了这一点，并开始更新我的答案。我不确定对他们来说最好的通用解决方案是什么……我认为他们希望下一次ing继续在

之外进行，但这不会发生。@Richard JP Le Guen是的，这可能需要一个新问题。我想他从所有的答案中获得了一些新的知识。

<ul class="pagination">
    <li><a class="one active" href="#">X</a></li>
    <li><a class="two" href="#">X</a></li>
    <li><a class="three" href="#">X</a></li>
</ul>

<a href="" class="next">Next</a>
<a href="" class="prev">Prev</a>

$('ul.pagination').find('a.active').removeClass('active').parent()
                  .next().find('a').addClass('active');

$('.next').click(function(e){
    e.preventDefault();
    if ($("ul.pagination a.active").parent().is(":last-child")) return;
    $('ul.pagination a.active').removeClass('active').parent().next().find("a").addClass('active');
});

$('.next').click(function(){
  $('ul.pagination').find('li.active').removeClass('active')
                    .next().addClass('active');
  return false;
});