Question

Trying to create a clickable event so that when #next is clicked the html in this case 2000-2001 etc is sent to a class on the body tag with an underscore eg. body class=”_2000-2001″.

The current date has the class selected and every time #next is clicked the selected class moves to that a tag.

What I need to figure out is how to get the next li a tag in the list on every click instead of the ul#dates li a.selected.

Should I use the .next() function?

<ul id="dates">                 
    <li><a href="#1970-1974" class="selected">1970-1974</a></li>        
    <li><a href="#1974-1980">1974-1980</a></li>         
    <li><a href="#1980-1992">1980-1992</a></li>         
    <li><a href="#1992-2000">1992-2000</a></li>         
    <li><a href="#2000-2001">2000-2001</a></li>     
    <li><a href="#2001-2004">2001-2004</a></li>         
    <li><a href="#2004-2006">2004-2006</a></li>         
    <li><a href="#2006-2007">2006-2007</a></li>         
    <li><a href="#2007-2008">2007-2008</a></li>         
    <li><a href="#2009-2011">2009-2011</a></li>     
    <li><a href="#Present">Present</a></li>
</ul>

<a href="#" id="next">+</a>
<a href="#" id="prev">-</a>

JQuery:

$('a#next').click(function() {
    var htmlStr = $('ul#dates li a.selected').html();
    console.log(htmlStr);
    $('body').attr('class', function() {
        return '_' + htmlStr;
    });
});

$('a#prev').click(function() {
    var htmlStr = $('ul#dates li a.selected').html();
    $('body').attr('class', function() {
        return '_' + htmlStr;
    });
});

Answer 1

Change

$('ul#dates li a.selected').html();

to

$('ul#dates li a.selected').parent().next().children().html();

Working fiddle.

EDIT: With the “ul#dates li a.selected” selector we have selected the anchor tag inside the li element. So you have to move up one step by using parent() call and next() takes you to the next li element. Because you want the html of the child element we call $.children().html();. If there are multiple element inside li, you will have to do somthing like $.children().first().html();.