Question

I’ve got navigation on my which looks like this:

<img id="leftButton" />
  <ul id="bullets">
    <li class="style"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
<img id="rightButton" />

What I’m trying to achieve is that when you click on right or the left button, the class ‘style’ moves to the neareast sibling.
For example when I click on the #rightButton I want to move the style class from the first list item to the second one, and so on and so forth.
I came into something like this:

$('#rightButton').click(function() {
    if  ($('#bullets li').hasClass('style')) {
        $('#bullets li').removeClass('style');
        $('#bullets li').next().addClass('style').
        }
});

With something like this, when you click on the #rightButton it correctly removes class “style” from the first list item, but adds that class to all the other ones.

Oh and sorry for this messed up code, I’m a begginer with jQuery.

Thanks in advance.

Answer 1

The selector you are using does not target a single element in this case. #bullets li will return all 5 list items contained within the element with id #bullets. If you want to target the single li which is assigned the CSS class active, change your selector to #bullets li.active.

So, your code would become:

$('#rightButton').click(function() {
    $('#bullets li.active').removeClass('active').next().addClass('active');
});

Note that you can chain your calls, and no need to test whether or not an element was returned.