Slider issue with :first-child

Question

I just wrote a few jQuery lines to have a simple slider on a page.

I don't want this slider to loop, so I disable PREV / NEXT buttons when we reach the begin/end of the list. It works well for the NEXT , but I can't figure why it's not working for PREV (you can see the button is not disabled, even if the first element is active).

Does anybody see something I would have missed?

 $(function(){ function sliderUpdate(elements) { $(elements).toggleClass('active'); var active = $('#slider li.active'); $('#slider .prev').toggleClass('disabled', active.is(':first-child')); $('#slider .next').toggleClass('disabled', active.is(':last-child')); } $('#slider').on('click', '.previous:not(.disabled)', function(event) { var toToggle = $('#slider li.active'); toToggle = toToggle.add(toToggle.prev('li')); sliderUpdate(toToggle); }); $('#slider').on('click', '.next:not(.disabled)', function(event) { var toToggle = $('#slider li.active'); toToggle = toToggle.add(toToggle.next('li')); sliderUpdate(toToggle); }); sliderUpdate($('#slider li').first()); }); 

 #slider li.active { color: red; } #slider .disabled { color: #ddd; cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="slider"> <a href="#" class="previous">PREVIOUS</a> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <a href="#" class="next">NEXT</a> </div> 

Answer 1

Your code is perfect, just the class name is incorrect.

//changed to .previous.
$('#slider .previous').toggleClass('disabled', active.is(':first-child'));

Code Snippet

 $(function() { function sliderUpdate(elements) { $(elements).toggleClass('active'); var active = $('#slider li.active'); $('#slider .previous').toggleClass('disabled', active.is(':first-child')); $('#slider .next').toggleClass('disabled', active.is(':last-child')); } $('#slider').on('click', '.previous:not(.disabled)', function(event) { var toToggle = $('#slider li.active'); toToggle = toToggle.add(toToggle.prev('li')); sliderUpdate(toToggle); }); $('#slider').on('click', '.next:not(.disabled)', function(event) { var toToggle = $('#slider li.active'); toToggle = toToggle.add(toToggle.next('li')); sliderUpdate(toToggle); }); sliderUpdate($('#slider li').first()); }); 

 #slider li.active { color: red; } #slider .disabled { color: #ddd; cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="slider"> <a href="#" class="previous">PREVIOUS</a> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <a href="#" class="next">NEXT</a> </div> 

Answer 2

//changed .prev to .previous . $('#slider .previous').toggleClass('disabled', active.is(':first-child'));

  function sliderUpdate(elements) {
   $(elements).toggleClass('active');
   var active = $('#slider li.active');
   $('#slider .prev').toggleClass('disabled', active.is(':first-child'));//change in this line
    $('#slider .next').toggleClass('disabled', active.is(':last-child'));
    }