Deeply Nested, Arbitrarily lenth Definition Lists, Zebra-striped in Jquery

Question

I have a page where the markup includes nested definition lists of both random depth and random numbers of DDs associated with any DT. Thus:

DL
- DT
- DD
- DT
- DD
- DD
  --DL
     --DT
     --DD
     --DT
     --DD
     --DD
 -DT
 -DD
 -DD

I need:

1. zebra stripe the groups of DT/DDs with one another and

2. to start the even/odd sequence over for each nested list that is encountered.

   • Using :even and :odd won't work because of the extra DDs.
   • I've tried using an each loop, shown here: http://jsfiddle.net/XJ9j4/, which fixes A but ignores B. i.e. compare the background color of the 1st child dt/dd combination to the 1st parent, and consider the return to the parent list which should be blue not green.

Thoughts?

Answer 1

With my new understanding of what you want, I think this will do. Let me know if I am still misunderstanding.

$("dl").each(function(){
   $this = $(this);

   $this.children("dt:even").addClass("even").nextUntil("dt").addClass("even");  
   $this.children("dt:odd").addClass("odd").nextUntil("dt").addClass("odd");
});

http://jsfiddle.net/XJ9j4/8/