Цикл через divs назад - jQuery

Question

Я сделал очень простое слайд-шоу. Нажатие на стрелку увянет $(this), а следующий слайд будет fadeIn() с использованием функции next().

Однако я не могу изменить это. prev() и next(), похоже, не проходят через DOM, они просто возвращаются к дереву. Вот код и jsfiddle:

$('li').first().siblings().hide(); 

$('.next').click(function() { 
    $(this) 
     .parent('body') 
     .find('li:first-child') 
     .fadeOut(function() { 
     $(this) 
      .next() 
      .fadeIn() 
     $(this) 
      .appendTo('ul') 
    }); 

}); 

JSFIDDLE

Answer 1

Одно быстрое и легкое решение, чтобы просто использовать active класс для отслеживания текущего активного li, что делает ваш JS намного проще. Вы можете упростить его и поместить оба обработчика кликов в одну функцию, но я оставил это для упрощения.

Fiddle: http://jsfiddle.net/Yqqbv/

$('li').first().siblings().hide(); 
$('li').first().addClass('active'); 

$('.next').click(function() { 
    var $active = $('li.active'); 

    $active.hide(); 
    $active.next().fadeIn().addClass('active'); 
    $active.removeClass('active'); 
}); 

$('.back').click(function() { 
    var $active = $('li.active'); 

    $active.hide(); 
    $active.prev().fadeIn().addClass('active'); 
    $active.removeClass('active'); 
}); 

Answer 2

Я считаю, что это то, что вы хотите:

$('.back').click(function() { 
    $(this) 
     .parent('body') 
     .find('li:first-child') 
     .fadeOut(function() { 
     $(this) 
      .parent() 
      .find('li:last-child') 
      .fadeIn() 
      .prependTo('ul') 
    }); 

});