CODEWITHSUNDEEP
jquery
Itai Sagi
Itai Sagi

Reputation: 5615

jquery - finding the last element and not changing it's class

JavaScript and jQuery newbie here, and I wanted to ask a question; Basically, I have a list and only 1 element of it is displayed at any given time, but the problem is - when I get to the end of the list, and I want to display the next element and hide the current element, than everything becomes hidden. here's the code:

ofcourse that I can set a last element anchor using last(), giving it an ID and then not executing the command if the ID is that of the last element, but I really don't know the syntax for JavaScript to do so.

HTML:

<style>
  #
  #container li .active
  {
    display:inline-block;
  }
  #container li .inactive
  {
    display:none;
  }
</style>
</head>
<body>
  <ul id="container">
   <il class='active'>item I</il>
   <il class='inactive'>item II</il>
   <il class='inactive'>item III</il>
   <il class='inactive'>item IIII</il>
   <il class='inactive'>item IV</il>
   </ul>
     <span id='next'>Next</span>
     <span id='prev'>Previous</span> 

<script>
$(".inactive").hide();
$(".active").show();
$("#next").click(function()
                 {
        var nexte=$(".active");
                nexte.addClass("inactive");
        nexte.removeClass("active")
        nexte.next(".inactive").addClass("active");
        nexte.next(".inactive").removeClass("inactive");
        $(".inactive").hide('slow');
        $(".active").show('slow');
});
$("#prev").click(function()
                 {
        var preve=$(".active");
                preve.addClass("inactive");
        preve.removeClass("active")
        preve.prev(".inactive").addClass("active");
        preve.prev(".inactive").removeClass("inactive");
        $(".inactive").hide('slow');
        $(".active").show('slow');
});
</script>

Thanks in advance, itai.

Upvotes: 1

Views: 666

Answers (2)

Felix Kling
Felix Kling

Reputation: 817208

Just check whether there exists a next element. Every jQuery object has a property length which indicates how many elements have been selected. If element.next() returns a jQuery object with length 0, you know there is no next element.

Example:

$("#next").click(function() {
    var current = $(".active"),
        next = current.next(".inactive");

    if(next.length > 0) { // there exists a next element
        current.add(next)
          .toggleClass("active inactive")
          .toggle('slow'):
    }
});

Edit: Removed repetition.

Reference: .length, .add(), .toggleClass(), .toggle()

DEMO

You can do the same for the other direction.

Upvotes: 4

Tejs
Tejs

Reputation: 41266

Everything is becoming hidden because the code you have written will not add an active class to a non existant element. 

nexte.next(".inactive").addClass("active");
nexte.next(".inactive").removeClass("inactive");

When you're on the last element in the list, the 'next' element is non existant, so the calls to addClass / removeClass just go into the void. If you're wanting to do wrapping of some sort (where when you click next on the last element, you see the first element), you would do something like this:

var nextElement = nexte.next('.inactive');

if(nextElement.length == 0)
   nextElement = $('.inactive').first(); // wrap to the first object, etc

nextElement.addClass('active').removeClass('inactive');

Upvotes: 2

Related Questions