Как я могу Loop .next()?

У меня есть 3 div с тем же классом, я добавляю класс "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 Link: http://jsfiddle.net/madhuri2987/KK66g/2/

Источник

4 ответа

Решение

Самый простой способ - просто проверить, .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/

Источник

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

$('#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 учебный класс.

Вроде работает. Я предполагаю, что хотел бы услышать любые комментарии относительно того, надежно ли это или нет.

Источник

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

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');}
});
Источник

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() если есть братья и сестры, которые вы не хотите включать в свой цикл / цикл.

Источник
Другие вопросы по тегам