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

Question

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

在我的下一个按钮上单击 id 喜欢从当前元素中删除类并将其添加到下一个我似乎无法添加它？

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

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

score 10 · Accepted Answer

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

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

...因为它<li>是应该“下一个”的元素，而不是<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');
}

score 3 · Accepted Answer

因为一旦你完成了这...

$('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>整个文档中的下一个。这更具挑战性——我不知道该怎么做。

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

我会这样写，防止动作在最后一个 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');
});

score 1 · Accepted Answer

您的代码中有两个错误：

删除后，将无法再找到活动类
您的 a 标签嵌套在 li 标签中，因此 next() 无法按预期工作

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

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

代码：

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

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

5 回答 5

Related

Reference