Alternating bg colors in a list depending on boolean value

Hey all

I'm pretty new to this jQuery thing, so please bear with me.... I think this is a logic question:

I have a list that looks like this:

<ul id="thisList">
<li class="this0">content</li>
<li class="this1">content</li>
<li class="this1">content</li>
<li class="this2">content</li>
<li class="this0">content</li>
<li class="this1">content</li>
<li class="this2">content</li>
<li class="this3">content</li>
<li class="this0">content</li>
<li class="this0">content</li>
<li class="this0">content</li>
<li class="this1">content</li>
<li class="this2">content</li>
<li class="this3">content</li>
</ul>

And I need to alternate the background color of the li's, using two colors, switching from one to the next each time the class is set "this0".

So it would look like this:

<ul id="thisList">
<li class="this0">content</li> red
<li class="this1">content</li> red
<li class="this1">content</li> red
<li class="this2">content</li> red
<li class="this0">content</li> blue
<li class="this1">content</li> blue
<li class="this2">content</li> blue
<li class="this3">content</li> blue
<li class="this0">content</li> red
<li class="this0">content</li> blue
<li class="this0">content</li> red
<li class="this1">content</li> red
<li class="this2">content</li> red
<li class="this3">content</li> red
</ul>

I'm sure there's a simple way to do this, but my designer's head just cannot get around the logic

I'm starting with:

$(".thisList > li").each(function() {
if $(this).hasClass("this0") {
//switch a boolean
}
});

Any clues would be greatly appreciated. I've searched the forums, but frankly, I'm not sure what search terms to use. I can't add extra html in this scenario.

thanks in advance

• Topic Participants

• andwhatknot

• hypocritizism