jQuery применить класс css к следующему одиночному элементу

Question

Я пытаюсь создать простое слайд-шоу jquery. Однако у меня возникают проблемы с его прохождением через элементы.

Я знаю, что next() просто добавляет активный класс к следующим элементам, а не к одному. Это та часть, с которой я столкнулся. Как просто применить один класс к следующему элементу, и он будет работать навсегда.

jQuery(document).ready(function() { 

var slides = jQuery('#slideshow'); //Parent container for the slideshow 
var activeClass = 'active'; //Set the active slide CSS class 
var interval = 3000; // Interval in miliseconds 
var countSlides = slides.children().length; 

//Runs the slideshow 
function cycle() { 
    slides.children().removeClass(activeClass); 
    slides.children().next().addClass(activeClass); 
}; 

setInterval(cycle, interval); 
}); 

Answer 1

Согласно documentation.next() возвращает элемент рядом с каждым элементом коллекции она вызвана. В вашем случае это все дети. Если вы выберете только текущий активный элемент перед тем, как отбросить класс .active, вы можете получить элемент рядом с ним.

function cycle() { 
    var $current = slides.children('.active'); 
    $current 
     .removeClass('active') 
     .next().addClass('active'); 
} 

---

Edit: а о том, как петли. Вам нужно проверить, есть ли следующий элемент. Если .next() не возвращает новый элемент, вы можете взять первого ребенка вместо этого:

var $current = slides.children('.active'), 
    $next = $current.next(); 
if (!$next.length) { 
    // No next slide, go back to the first one. 
    $next = slides.children().first(); 
} 
$current.removeClass('active'); 
$next.addClass('active');