Question

I have the following function to style list elements:

function styleRows() {
    $(".pretty-list li").removeClass("even-row").removeClass("odd-row");
    $(".pretty-list li:even").addClass("even-row");
    $(".pretty-list li:odd").addClass("odd-row");
}

I then give any <ul> i want styled the ‘pretty-list’ class and all is fine. However I have various bits of JS that fadeout/remove rows and I then call this function to restyle the rows. The count though continues on through each different <ul>, so if there’s 2 lists and the first ends on an odd row then the second will start on an even – I want each styled element to start with an odd row.

Is it possible then to tell jQuery/JS to reset the count after it completes each element? Thanks for any help.

Answer 1

You just need to split it up like so:

$(".pretty-list").each(function () {
    $(this).find("li").removeClass("even-row odd-row")
        .filter(":even").addClass("even-row").end()
        .filter(":odd").addClass("odd-row");
});

Using the each function there is the important bit. I’ve also added a few more touches which (if they work — it’s untested) should hopefully make it a bit more efficient.

It’s also worth noting that all modern browsers support what you’re doing with plain CSS which is much easier to maintain.

.pretty-list li:nth-child(2n) {
    /* your 'even' styles */ 
}
.pretty-list li {
    /* your 'odd' styles */
}