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.

Worked for me. Although I cleaned up some of the code in this: http://jsbin.com/jeheni/1/edit?js,output — Sukima, Nov 01 '14 at 04:16
In fact none of that code is required: http://stackoverflow.com/a/7414607/227176 — Sukima, Nov 01 '14 at 04:29
possible duplicate of [How to cycle through siblings using jQuery?](http://stackoverflow.com/questions/7414573/how-to-cycle-through-siblings-using-jquery) — Sukima, Nov 01 '14 at 04:30
Here is the simplified code with the duplicated answer as the example: http://jsbin.com/jeheni/2/edit?js,output — Sukima, Nov 01 '14 at 04:35
Thanks Sukima. Just trying some more, it was the nth-child() causing issues on the iPad. Changed it to eq() and works now. — Jim Hyland, Nov 01 '14 at 04:36
@Sukima & Jim - Please either one of you add that as an answer then and mark it as correct, so everyone knows this question is solved. — myfunkyside, Nov 01 '14 at 06:39

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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>

score 0 · Answer 2 · answered Nov 01 '14 at 11:09

0

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.

answered Nov 01 '14 at 11:09

Jim Hyland

239
4
14

Cycling through elements with jQuery

2 Answers2