jquery goto next element

I'm trying to use jquery to have two separate links go to the next/previous item in an li.

Here is the html:

<div id="prev开发者_Go百科iousButton">
    <h1 id="previous"><a href="#previousBox" class="previous">&lt;</a></h1>
</div>
<div id="nextButton">
     <h1 id="next"><a href="#nextBox" class="next">&gt;</a></h1>
</div>

And here is the jquery:

$('.next').click(function (event) {
    event.preventDefault();
    $('html,body').animate({scrollLeft: $(this.hash).offset().left - paddingWidth}, 750);
    $('li').previous().fadeTo("slow", 0.5);
    $('li').next().fadeTo("slow", 1.0);
});

$('.previous').click(function (event) {
    event.preventDefault();
    $('html,body').animate({scrollLeft: $(this.hash).offset().left - paddingWidth}, 750);
    $('li').next().fadeTo("slow", 0.5);
    $('li').previous().fadeTo("slow", 1.0);
});

But what I'm missing is the actual function to select the next item in the list, how can I do this? I was thinking perhaps changing the destination of the link each time the nextButton is clicked, but I'm not sure how about to do it. Any ideas? I'd prefer not to use any external jquery libraries if not necessary.

First of all, from an SEO aspect - you cannot use two <h1> tags in one page.

--

To your question:

you can combine the $.index() function and the $.eq() function.

var NextLi = $('ul.SomeUL').eq($('li.SelectedLi').index() + 1);

Good Luck

You can store the current node in the handler and use that to decide the next node like this:
See it in action at jsFiddle.

$('a.next, a.previous').click (liScroller);

function liScroller (event) {
    var newNode;
    liScroller.oldNode  = liScroller.oldNode  ||  $('#scrollMe li:first');

    event.preventDefault ();
    $('html,body').animate({scrollLeft: $(this.hash).offset().left - paddingWidth}, 750);

    //--- Get the new element, depending on the direction.
    var bGoingBack      = $(this).hasClass ('previous');
    if (bGoingBack) {
        newNode         = liScroller.oldNode.prev ('li');
        if (newNode.length == 0)
            newNode     = $('#scrollMe li:last');
    }
    else {
        newNode         = liScroller.oldNode.next ('li');
        if (newNode.length == 0)
            newNode     = $('#scrollMe li:first');
    }

    //--- Do the switcheroo.
    liScroller.oldNode.fadeTo ("slow", 0.5);
    newNode.fadeTo            ("slow", 1.0);

    //--- Update stored value.
    liScroller.oldNode  = newNode;
}