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

Question

我有一个链接列表，其中一个具有类active。

在我的下一个按钮点击时，我想从当前元素中删除该类并将其添加到下一个元素，但我似乎无法添加它？

我制作了一个Fiddle，希望能够解释我的问题，任何帮助都将是极好的，谢谢

http://jsfiddle.net/h6D4k/

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

- Liam

---

使用变量？foo = $().find(); foo.remove; foo.next().add，或者其他什么（或者链式调用）。 - njzk2

顺便问一下，当您到达列表底部时想发生什么？ - Blazemonger

Answer 1

jQuery最常用的便利之一是它的方法通常可以链接在一起——换句话说，它们会返回被调用的对象本身。因此，你可以写出这样的代码：

```javascript $(selector).method1().method2().method3(); ```

这意味着，每个方法都能够接收上一个方法返回的对象，并继续对其进行操作。

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

...因为应该对<li>元素进行“nexted”操作，而不是对<a>元素进行操作。但实际上，如果它是问题中的最后一个元素，您可能不应该完全舍弃“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');
}

- raina77ow

Answer 2

因为一旦你完成了这个步骤...

$('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');

---

您有另外一个问题。根据jQuery API对于next()的说明，它将：

获取匹配元素集合中每个元素紧邻的后续兄弟元素。如果提供了选择器，则仅检索匹配该选择器的下一个同胞元素。

您并不想获取下一个同胞元素：

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

您想要获取整个文档中的下一个<a>。这更具挑战性 - 我不确定如何做到这一点。

- Richard JP Le Guen

---

@Jack - 是的，我注意到了并开始更新我的答案。不确定对于它们来说什么是最好的通用解决方案... - Richard JP Le Guen

Answer 3

根据你在fiddle中的html结构，这实际上就是你想要的。 http://jsfiddle.net/h6D4k/1/

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

- Jack

---

我认为他们希望next-ing在<ul>之外继续 - 但这不会发生。 - Richard JP Le Guen

@Richard JP Le Guen 嗯，那可能需要一个新的问题。 我想他已经从所有答案中获得了一些新的知识。 - Jack

Answer 4

我会这样写，以防止最后一个li上的操作做任何事情。 http://jsfiddle.net/h6D4k/6/

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

- Kevin B

Answer 5

你的代码中有两个错误：

1. 一旦删除，就无法再找到活动类
2. 你的a标签嵌套在li标签中，所以next()函数不能按照你的预期工作

为了简化事情，你可以将活动类附加到li标签上。

演示链接：http://jsfiddle.net/h6D4k/7/

代码：

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

- Christophe