10

Tenho uma lista com diversos itens, e logo acima dessa lista terá dois botões, "próximo" e "anterior". Queria que quando o usuário clicasse em próximo, por exemplo, adicionasse uma classe diferente ao próximo item da lista e removesse a classe do item anterior.

Sei que dá para fazer usando o next().addClass do jQuery porém não consegui.

3
  • Parece que o caminho é por aí mesmo... Poderia postar o código que você usou pra tentar, talvez seja só um detalhe bobo...
    – mgibsonbr
    Commented 3/02/2014 às 18:04
  • Pode editar este fiddle para mostrar melhor o seu problema? : jsfiddle.net/zNVG6
    – Sergio
    Commented 3/02/2014 às 18:06
  • Puts cara, desculpa, não tenho mais o código, como não consegui, fiquei puto e apaguei :(
    – Odair
    Commented 3/02/2014 às 18:07

5 Respostas 5

5

Você pode usar assim:

$('button#anterior').click(function () {
    $('.minhaClasse').removeClass('minhaClasse').prev().addClass('minhaClasse');
    if (!$('.minhaClasse').length) {
        $('li:last').addClass('minhaClasse')
    }
});
$('button#proximo').click(function () {
    $('.minhaClasse').removeClass('minhaClasse').next().addClass('minhaClasse');
    if (!$('.minhaClasse').length) {
        $('li:first').addClass('minhaClasse')
    }
});

Exemplo

1
  • 1
    Perfeito cara! Ficou muito bom dessa forma :) valeu mesmo.
    – Odair
    Commented 3/02/2014 às 18:56
4

Sua proposta de solução (usar o next e o addClass) está correta. Aqui vai um exemplo simples (sem checagem de condições limite - como o primeiro ou último elemento):

$(".selecionado")
    .removeClass("selecionado")
    .next()
    .addClass("selecionado");

Exemplo no jsFiddle.

P.S. Uma solução (não necessariamente a mais "limpa") para testar os casos limite seria verificar ao final do código se "sobrou" alguém selecionado e, caso não, escolher um como padrão (o último, se quer que ele "pare de andar pra frente", ou o primeiro, se quer que ele "dê a volta"). Exemplos:

if ( $(".selecionado").length == 0 )
    $("li:last").addClass("selecionado");

Exemplo parando, exemplo dando a volta.

1
  • Cara, muito bom! Funcionou certinho aqui! Muito obrigado
    – Odair
    Commented 3/02/2014 às 18:30
3

Algo assim?

$('.next').on('click', function() {

    $('ul>li.active').removeClass('active').next('li').addClass('active');

});

$('.prev').on('click', function() {

    $('ul>li.active').removeClass('active').prev('li').addClass('active');

});
1
  • Cara, valeu! Era isso mesmo. Muito obrigado companheiro
    – Odair
    Commented 3/02/2014 às 18:17
2

O caminho é esse mesmo, porém tome cuidado o .next() pega o próximo elemento ou seja:

<script>
  $('.primeira').next();
</script>
<div class="primeira"></div>
<div class="segunda"></div>

O script pega o objeto div segunda.

Porém se for assim

<script>
  $('.primeira').next();
</script>
<div class="primeira"></div>
<div class="itens">
    <div class="segunda"></div>
<div>

O objeto pega a classe itens e não a segunda. Teria que pegar o .next() depois utilizar o .children()

http://api.jquery.com/category/traversing/tree-traversal/

1

Ve se compreende a logica.

$(document).ready(function(){
    var anterior  = $('.btnAnterior');
    var proximo   = $('.btnProximo');
    var itemLista = $('.lista li:first-child');
    var qtdItens  = $('.lista li').length;
    var itemNum   = 1;
    var itemAtual = 1;

    $.each('.lista li', function(){
        $(this).addClass('item'+itemNum);
        itemNum++;
    })        

    proximo.click(function(){
        $('item'+itemAtual).removeClass('classeRemovida');
        $('item'+itemAtual+1).addClass('classeAdicionada');
        itemAtual = itemAtual + 1;
    })

    anterior.click(function(){
        $('item'+itemAtual).removeClass('classeRemovida');
        $('item'+itemAtual-1).addClass('classeAdicionada');
        itemAtual = itemAtual - 1;
    })
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .