Question

I’ve got 5 li’s in a ul and a button . On clicking the button I want to add a class to the first li then on the second click remove the class from the first li and add it too the second ect . I know i could just give each li an individual id but i know there must be a better way and I’ll probably want it to be dynamic at some point as well .

thanks in advance .

Answer 1

Here’s a working solution: http://jsfiddle.net/PFpaU/

With comments: http://jsfiddle.net/PFpaU/1/

JS:

window.change = function() {
    // Select any li which already has the class
    var li = $("li.myclass");
    // If there were any matches...
    if (li.length)
        // Remove the class from the matched li and then move to the
        // next item in the DOM tree, then add the class to that item
        li.removeClass("myclass").next().addClass("myclass");
    else
        // If none of the li's had the class, add it to the first one
        $("li").first().addClass("myclass");
}

HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<button onclick="change()">Change</button>

CSS:

.myclass {
     color: #f00;   
}