Cycling through elements with jQuery

Question

I've got a little script to cycle forward and backward through some items. Here's a simplified pen which shows the same issue: http://codepen.io/2kp/pen/sLoEb

$(document).ready(function(){

  var totalslides = $('p').length;
  var currentslide;
  var newslide;

  $('.left').on('click', function() {
    currentslide = $('p.active').index()+1;
    if (currentslide == 1){
      newslide = totalslides;
    }
    else {
      newslide = currentslide-1;
    }
    $('p.active').removeClass('active');
    $('p:nth-child('+newslide+')').addClass('active');
  });

  $('.right').on('click', function() {
    currentslide = $('.slide.active').index()+1;
    if (currentslide == totalslides){
      newslide = 1;
    }
    else {
      newslide = currentslide+1;
    }
    $('p.active').removeClass('active');
    $('p:nth-child('+newslide+')').addClass('active');
  });

});

The left button works fine, but the right button works just sometimes. On the real site, both left and right buttons work fine on everything except iPad. iPhone, Android and desktop are fine.

Really weird. Any help gratefully received.

Answer 1

Use .eq() instead of :nth-child . Also we can drop the need for an if block by using modulus (idea from this SO Answer ):

 $(function() { var $slides = $('p.slide'); function transition(step) { var $activeSlide = $('p.slide.active').removeClass('active'); var nextIndex = ($slides.index($activeSlide) + step) % $slides.length; $slides.eq(nextIndex).addClass('active'); } $('.left').on('click', $.proxy(transition, null, -1)); $('.right').on('click', $.proxy(transition, null, 1)); })(); 

 button { font-size: 32px; } .slide { display: none; } .slide.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="left">&#9756;</button> <button class="right">&#9758;</button> <div class="slides"> <p class="slide active">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias neque necessitatibus, deleniti natus est dolores aut earum maiores ullam quas quis mollitia nemo, tenetur magni. Veniam in porro perspiciatis.</p> <p class="slide">2: Itaque impedit ratione, eveniet, quisquam voluptate perferendis eum accusantium! Quia mollitia dolor a nulla, tenetur nesciunt ex tempore officia autem modi sit molestiae veniam voluptates vero itaque beatae similique quidem.</p> <p class="slide">3: Est libero consequuntur ipsum distinctio corporis doloremque sunt iure autem tenetur labore at voluptate quam, repudiandae alias asperiores unde iste. Perspiciatis laborum, culpa sit maxime nostrum consequuntur labore reprehenderit adipisci.</p> <p class="slide">4: Error eveniet, modi a sunt animi quos accusamus ullam quibusdam earum doloribus, omnis dicta ut. Facilis laboriosam autem libero itaque accusantium explicabo blanditiis veritatis sint nesciunt obcaecati, deleniti! Alias, impedit?</p> <p class="slide">5: Modi neque harum vero minima nemo, dolor dolorum veritatis fuga obcaecati vitae! Quo commodi temporibus obcaecati rem repudiandae vel assumenda nostrum alias. Debitis non esse culpa officiis eum exercitationem distinctio!</p> </div> 

Answer 2

I'm not sure why. Probably some kind of conflict with other parts of my script, but replacing nth-child() with eq() and adjusting the maths sorted out the issue on the iPad.