菜单遍历next和prev按钮单击

Question

can any one optimize this code i am new to jquery . i want add class on next and previous button click.any way i wrote this code it's working for me but if any one optimize this code using jquery predefined methods .then it will more helpful.. Thanks in advance

$(document).ready(function () {
    var length = $('#slides li').size() - 1;
    var curren = 0;
    console.log(length);
    $('.next').on('click', function () {
        if (curren >= 0 && curren < length) {
            curren++;
            $('.selected').removeClass('selected');
            $('#slides li:eq(' + curren + ')').addClass('selected');
        }
    });
    $('.prev').on('click', function () {
        if (curren >= 1) {
            curren--;
            $('.selected').removeClass('selected');
            $('#slides li:eq(' + curren + ')').addClass('selected');
        }
    });
});

my html code

<ul id="slides">
    <li class="selected">first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>five</li>
    <li>six</li>
</ul>

Answer 1

You should have a look at $.next and $.prev .

Your code can easily be altered into something along these lines:

$(".next").on("click", function() {
  var selected = $("#slides li.selected");
  var next = selected.next();
  if(next.length){next.addClass("selected");selected.removeClass("selected");}
});
$(".prev").on("click", function() {
  var selected = $("#slides li.selected");
  var prev = selected.prev();
  if(prev.length){prev.addClass("selected");selected.removeClass("selected");}
});

Example can be found here: jsbin