Stripe class for div

Question

I have a long list of several divs ... let 20 div

All wrapping in another ..

<div id="main">
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
.... etc
</div>

I like to add the gray class to one of the two divs and make it a zebra! jquery please!

Answer 1

$('.xyz:odd').addClass('grey');

Keep in mind that gray is not a semantic class name. It's better to call the identifier "odd" or "zebra" or something else. If you decide and change the odd color to blue, your class name would be strange: P

Answer 2

jQuery makes this about as simple as it can be:

$('#main>div.xyz:even').addClass('grey');

http://api.jquery.com/even-selector/

Answer 3

IE, , CSS:

.xyz:nth-child(odd) {
  background-color: ...;
}

.xyz:nth-child(even) {
  background-color: ...;
}