Как сделать Loop.next()?

У меня есть 3 divs с тем же классом, я добавляю класс 'selected' в NEXT DIV на клик и удаляя его из предыдущего класса, его отлично работает, но я хочу его закодировать

В настоящее время его переход от 1 → 2 → 3, я хочу, чтобы он был в петле, 3 → 1, пожалуйста, помогите...

HTML

<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

CSS

.selected{background:red}

JS

$('#button').click(function(){
    $('.section.selected').removeClass('selected').next('.section').addClass('selected'); 
});

JS Fiddle Ссылка: http://jsfiddle.net/madhuri2987/KK66g/2/

Ответ 1

Самый простой способ - проверить, существует ли .next(), а если не "выбрать" первый.

var $next = $('.section.selected').removeClass('selected').next('.section');
if ($next.length) {
    $next.addClass('selected'); 
}
else {
    $(".section:first").addClass('selected');
}

http://jsfiddle.net/KK66g/3/

Ответ 2

Я не уверен, должен ли я утверждать, что это работает в каждом случае, но я всегда задавался вопросом, можно ли перейти к первому, если последнее не будет действительным. Это то, что я разработал:

$('#button').click(function(){
    $('.selected + .section, .section:eq(0)')
        .last().addClass('selected')
        .siblings('.selected').removeClass('selected');
});

http://jsfiddle.net/userdude/9UFD2/

Что это значит, сначала выберите .section, который после .selected:

.selected + .section

Я также добавляю вторичный селектор, чтобы убедиться, и получим хотя бы одно совпадение:

, .section:eq(0)

Вышеупомянутое представляет собой первый $('.section')[0], в этом относительно простом примере. Затем я использую .last() в результате выбора соединения, давая мне либо результат [1] (для чего было бы правильным знаком .next()), либо [0] для первого совпадения (см. .last()). как первый, так и последний, если в списке есть только один результат).

Хотя селектора упорядочены, по-видимому, противоположно использованию .last(), это, похоже, работает вместо .first(), для которого я не обязательно понимаю причину, почему это так. Это какой бы порядок не был выбран в селекторах, поэтому я заказал им то, как они имели смысл в выборе.

Тогда остальное просто. Добавьте класс к тому, какой селектор вернул .last(), затем найдите .siblings() для этого (недавно) выбранного .section с помощью .selected (только тот, который мы отбираем) и удалите его .selected класс.

Кажется, что сработало. Полагаю, я хотел бы услышать какие-либо комментарии относительно того, является ли это надежным или нет.

Ответ 3

Я сделал простой код, подобный этому

var i=0;
$('#button').click(function(){
    i++;
    if(i == $('.section').length) {$('.section.selected').removeClass('selected');$($('.section')[0]).addClass('selected');i=0;}
    else{$('.section.selected').removeClass('selected').next('.section').addClass('selected');}
});

Ответ 4

CoffeeScript

Мое простое решение CoffeeScript, которое, как я думал, я бы поделился для тех, кто его использует:

$currently_selected = $('.section.selected')

# Loop back to first sibling if on the last one. 
if $currently_selected.next().length is 0 
  $next_selected = $currently_selected.siblings().first()

else 
  $next_selected = $currently_selected.next()

$currently_selected.removeClass('selected')
$next_selected.addClass('selected')

ПРИМЕЧАНИЕ. Обязательно передайте соответствующие selector в next() и siblings(), если есть братья и сестры, которые вы не хотите включать в цикл/цикл.