jquery zebra-striping: how to ignore nested table from radiobuttonlist

Question

I'm using jquery to zebra stripe a table, and it's working fine - except that there's a radio button list that is also getting the striping applied.

My table has

<table class="stripeMe">

The query is

$('.stripeMe tr:nth-child(odd)').addClass('odd');

The problem when one of the even rows contains an asp.net radiobutton list (which is rendered as a single-row table) it also gets the highlight.

Is there any way to avoid this?

Answer 1

Specify children using the child-selector^(docs):

$('.stripeMe > tbody > tr:nth-child(odd)').addClass('odd');

...and be sure to explicitly include a <tbody> element in your markup if you haven't.

Currently you're using the descendant-selector^(docs), which selects all <tr> elements no matter how deeply nested under .stripeMe.