没有next()怎么能回到开头

Question

how can i go back to the beginning when there is no next()

$(function () {
  (function hideHeading() {
    setInterval(function () {
      $('.active').fadeOut(2000, function () {
        $(this).removeClass('active').next().addClass('active').fadeIn(2000);
      });
    }, 2000);
  })();
});

example here

http://codepen.io/OsamaElzero/pen/LVeLeY

Answer 1

Check if next is an element, if not, select the first sibling.

var elem = $(this).removeClass('active')
var next = elem.next();
if(next.length===0) {
    next = elem.siblings().first();
}
next.addClass('active').fadeIn(2000);

Answer 2

You actually don't need setInterval since you could simply do a recursion as below. If the .next() isn't there, set the pointer to first() .

$(function () {
    (function hideHeading() {
        $(".active").fadeOut(2000, function () {
            var $this = $(this).removeClass('active');
            var $next = ($this.next().length && $this.next()) || ($this.siblings().first());
            $next.addClass('active').fadeIn(2000, hideHeading);
        });
    }());
});

Updated Pen