Question

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="previousButton">
    <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.

Answer 1

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