using jquery as an alternative to css nth child

Question

Hi. I am using the following css to create list items with a chckerboard background ( every other list item has a grey background, which shift every row to create a checkerboard pattern:

li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
    background-color:grey;
}

Is there way I can do this using jquery that is more supportive than css3? Thanks

Answer 1

Short answer: yes!

Just use it as a selector inside a document.ready and it'll work cross-browser, like this:

$(function() {
  $("li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7)")
    .css('background-color','grey');
});

Note: this runs on the elements present when it's run, if you're dynamically adding/removing elements, just call the same selector/.css() then. I'd recommend a class in this case though, so instead of .css('background-color','grey'), you'd have .addClass('myClass')