How to add class to the next element when clicking the button?

Asked

Viewed 1,657 times

10

I have a list of several items, and just above that list will have two buttons, "next" and "previous". I wanted when the user clicked next, for example, to add a different class to the next item in the list and remove the class from the previous item.

I know you can do it using the next().addClass jQuery but I couldn’t.

javascript

  • Looks like the way is right there... could post the code you used to try, maybe it’s just a silly detail...

  • You can edit this fiddle to show your problem better? : http://jsfiddle.net/zNVG6/

  • Dude, sorry, I don’t have the code anymore, since I couldn’t, I got pissed and I deleted :(

5 answers

5


You can use it like this:

$('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')
    }
});

Example

  • 1

    Perfect guy! It turned out really good this way :) was worth it even.

4

Your solution proposal (use the next and the addClass) is correct. Here’s a simple example (no limit conditions check - like the first or last element):

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

Example in jsFiddle.

P.S. A solution (not necessarily the most "clean") to test the boundary cases would be to check at the end of the code if "there is" someone selected and, if not, to choose one as a pattern (the latter, if you want him to "stop moving forward", or the former, if you want him to "turn around"). Examples:

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

Stopping example, example going around.

  • Man, really good! It worked right here! Thank you so much

3

Something like that?

$('.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');

});

  • Man, thanks! That’s right. Thank you very much mate

2

The way is the same, but take care .next() takes the next element or:

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

The script takes the object div segunda.

But if so

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

The object takes the class itens and not the second. You would have to take the .next() then use the .children()

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

1

See if you understand the logic.

$(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;
    })
});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.