Question

我有一个链接列表，其中一个类是活动的。

在我的下一个按钮上点击id就像从当前元素中删除该类并将其添加到下一个只有我似乎无法添加它？

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

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

Answer 1

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

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

...因为<li>元素应该是'nexted'，而不是<a>个元素。但事实上，如果它是最后一个要素，你不应该完全放弃“主动”：

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

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

你有第二个问题。根据{{1}}的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>。这更具挑战性 - 而且我不知道该怎么做。

Answer 3

这实际上是你想要的基于你的html结构的小提琴。 http://jsfiddle.net/h6D4k/1/

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

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

Answer 5

您的代码中有两个错误：

删除后，无法再找到活动课程
您的标签嵌套在li标签中，因此next（）无法正常工作

为简化起见，您可以将活动类附加到li标记。

现场演示：http://jsfiddle.net/h6D4k/7/

代码：

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

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

5 个答案: