Have Geek Brain

Using jquery as an alternative to css nth child

I am using the following css to create list items with a chckerboard background (each list item has a gray background which shifts each 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 a way to do this with jquery that is more favorable than css3? Thanks to

+2


a source to share


1 answer


The short answer is yes!

Just use it as a selector internally document.ready

and it will work cross-browser like:



$(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 is done on elements present at startup , if you add / remove elements dynamically, just call the same selector / .css()

. I would recommend a class in this case, so instead .css('background-color','grey')

you would have.addClass('myClass')

+7


a source






More articles:


All Articles