How 1-liner to alternate bg color on li but start over after each header?
I am trying to add a class to a div enclosed by li elements. Have to use a div inside the li to make the entire row colored and not just the li text. Here is my jquery 1.9 code:
- $(function(){$('a + h3 ~ li:even > div').addClass('bgcolor1')});
And here is the sample html layout:
- <ul>
- <a name="a"></a> <h3>A</h3>
- <li><div>blah blah blah</div></li>
- <li><div>blah blah blah</div></li>
- <li><div>blah blah blah</div></li>
- <a name="b"></a> <h3>B</h3>
- <li><div>blah blah blah</div></li>
- <a name="c"></a> <h3>C</h3>
- <li><div>blah blah blah</div></li>
- <li><div>blah blah blah</div></li>
- </ul>
It alternates the background color but doesn't do what I want, which is to *restart* at the beginning of each letter group. For example, even though the "B" list item is a globally-even numbered item, I want it to have the class added so that it has a colored background, thus I want the even/odd determination to start right after the closing h3 tag. What is wrong with my jquery selector code?