Question

How would I go about remove the class from all elements except the next one?

For example:

<ul>
  <li class="current"><a href="#">Trigger</a></li>
  <li class="next"><a href="#">Trigger</a></li>
  <li class="next"><a href="#">Trigger</a></li>
  <li class="next"><a href="#">Trigger</a></li>
</ul>

Clicking on Trigger link a removes all the "next" classes from the li elements except the one directly below

I’m not worried about the whole set of code to achieve this. I’ve written everything that I need apart from this one thing of removing the class except on the next li?!

UPDATE: SOLVED

Seems I overlooked a simple solution which works well:

$(this).parent().siblings().not().next().removeClass('next');

Answer 1

Use the .nextAll method to get all consecutive siblings after the current element. Then, reduce the set using .slice(1).

$('li a').click(function() {
    $(this).parent().nextAll().slice(1).removeClass('next');
});

The previous method only removes next from later items. If you want to affect all siblings, the following can be used:

$('li a').click(function() {
    var $parent = $(this).parent();
    $parent.siblings().not($parent.next()).removeClass('next');
});

Another option: Remove the next class from all elements, then add it to the next element.