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

Question

I have a list of links, one has the class active.

On my next button click id like to remove the class from the current element and add it to the next only I cant seem to get it to add?

Ive made a fiddle to hopefully explain my problem, any help would be great, thanks

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

Answer 1

One of the jQuery most usable conveniencies is that its methods are (usually) chainable - in other words, they return the very object they are called from. So you can simply write this:

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

... as it's <li> elements that should be 'nexted', not <a> ones. But in fact, you shouldn't probably discard 'active' altogether if it's the last element in question:

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

Because once you've done this...

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

There is no more a.active - the active classname has been removed from that element. So repeating the same selector...

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

... will select nothing.

Chain it all together instead.

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

---

You have a second problem. According to the jQuery API for next() , it will:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

You're not trying to get the following sibling:

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

You're trying to get the next <a> in the whole document. That's more challenging - and I'm not sure how to do it.

Answer 3

This is actually what you want based on your html structure in you fiddle. http://jsfiddle.net/h6D4k/1/

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

Answer 4

I would write it this way, preventing the action from doing anything on the last li as well.

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

You have two errors in your code:

1. Once removed, the active class can't be found anymore
2. your a tags are nested in li tags so next() doesn't work as you expect

To simplify things, you could attach the active class to the li tags.

Live demo: http://jsfiddle.net/h6D4k/7/

Code:

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