I am trying to figure out a way to zebra stripe list items in an
unordered list. The only tricky part is that I don't want to zebra
stripe the nested lists, but I want to maintain the same every other
stripping pattern on the nested list's parent. Here is an example of
the structure that I want to get at (I've added in the class here
manually to make it more clear what I am trying to do):
<ul class="foo">
<li class="bar">Item 1
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li class="bar">Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 4
</li>
<li class="bar">Item 5
</li>
<li>Item 6
</li>
<li class="bar">Item 7
</li>
<li>Item 8
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li class="bar">Item 9
</li>
<li>Item 10
</li>
</ul>
My attempt to pull this off is something like:
document.observe("dom:loaded", function() {
$$("ul.foo li").each(function(el, i) {
if (!el.up(1).match('li') && i % 2 == 0) {
el.addClassName('bar');
}
});
});
This grabs the list items I want by excluding the <li>s nested inside
other <li>s, but the zebra stripping seems to go catawampus and
ignores the rows containing the nested lists altogether. In other
words, the every/other motif starts over again once it runs into an
<li> containing the nested <ul>.
Any help would be appreciated! :)
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
