CODEWITHSUNDEEP
jqueryhtml
Alex
Alex

Reputation: 13

jQuery .next - Add a Class to next Element

i'm trying to change on click the class of the div's inside the container and create a loop. But with the .next selector the class is applied to all elements.

The jQuery-Code:

$(document).ready(function(){
    $( "#link" ).click(function() {
        if ( $( ".inhalt" ).hasClass( "active" )) {
            if ( $( ".inhalt" ).last().hasClass( "active" )) {
                $( ".inhalt" ).removeClass('active');
                $( ".inhalt" ).first().addClass('active');
                return;
            }   
            $( ".inhalt" ).prev().removeClass('active');
            $( ".inhalt" ).next().addClass('active');
        }
        else {
            $( ".inhalt" ).first().addClass('active');
        }
    });
});

The HTML:

<div id="container">
   <div class="inhalt"><a href="#">1</a> </div>
   <div class="inhalt"><a href="#">2</a> </div>
   <div class="inhalt"><a href="#">3</a> </div>
   <div class="inhalt"><a href="#">4</a> </div>
   <div class="inhalt"><a href="#">5</a> </div>
   <div class="inhalt"><a href="#">6</a> </div>
</div>
<div><a href="#" id="link">hier</a></div>

Thanks in advance for your help! Alex

Upvotes: 0

Views: 102

Answers (3)

Jay Blanchard
Jay Blanchard

Reputation: 34416

Here is another way - http://jsfiddle.net/jayblanchard/5x72x/

$('#link').click(function () {
    if ($('.inhalt').last().hasClass('active')) {
        $(".inhalt").removeClass('active');
        $(".inhalt").first().addClass('active');
    } else {
        $('.active').next('.inhalt').addClass('active');
        $('.active').first().removeClass('active');
    }
});

This method takes advantage of knowing where the active class is. The only thing that could be done to improve this is to determine if any of the div's had the active class and then add the active class to the first one if none had it.

EDIT: http://jsfiddle.net/jayblanchard/5x72x/1/ demonstrates testing for the class and adding to the first one if it doesn't exist.

$('#link').click(function () {
    if(!$('.inhalt').hasClass('active') ){
        $(".inhalt").first().addClass('active');
    } else if ($('.inhalt').last().hasClass('active')) {
        $(".inhalt").removeClass('active');
        $(".inhalt").first().addClass('active');
    } else {
        $('.active').next('.inhalt').addClass('active');
        $('.active').first().removeClass('active');
    }
});

Upvotes: 0

Ja͢ck
Ja͢ck

Reputation: 173562

Okay, you want the active class to cycle across your elements:

jQuery(function($) {
  var $inhalts = $('.inhalt'),
      index = null; // no active item yet

  $('#link').on('click', function() {
    if (index === null) {
      index = 0; // make the first one active
    } else {
      $inhalts.eq(index).removeClass('active'); // remove class from previous
      index = (index + 1) % $inhalts.length; // go to next item and wrap
    }
    $inhalts.eq(index).addClass('active');
  });
});

This code caches the list of items you want to apply the active class to and keeps an index of the last item that was active.

Algorithm:

  • If there's no previously selected element, the index is set to the first item.
  • Otherwise, remove the class of the current index and increment the index (making sure it wraps around)
  • Apply the active class to the current index.

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$(function(){
    $('#link').click(function(e){
      e.preventDefault();
     if($('.active').length==0 || $('.active').next().length==0)
     {
         $('.active').removeClass('active');
         $('.inhalt:first').addClass('active');
     }
     else
     {
          $('.active').removeClass('active').next().addClass('active');
     }  

    });
});

Demo

Upvotes: 1

Related Questions