its because
$('div ul.primary li > ul')
selects *all* (not just the direct child) <li>'s under the ul.primary,
and then looking at each first child <ul> and applying that
"secondary" class
On Apr 15, 3:28 pm, Darron <darron.dri...@gmail.com> wrote:
> I am trying to build a nice class heirarchy for a nested list menu
> using the following html:
>
> <div>
> <ul>
> <li>
> <ul>
> <li>
> <ul>
> <li></li>
> </ul>
> </li>
> </ul>
> </li>
> </ul>
> </div>
>
> Using this function:
>
> $(function(){
>
> $('div > ul').addClass('primary');
> $('div ul.primary li > ul').addClass('secondary');
> $('div ul.secondary li > ul').addClass('tertiary');
>
> });
>
> I would like to end up with:
>
> <div>
> <ul class="primary">
> <li>
> <ul class="secondary">
> <li>
> <ul class="tertiary">
> <li></li>
> </ul>
> </li>
> </ul>
> </li>
> </ul>
> </div>
>
> But instead, I end up with the 3rd level <ul> having the classes
> 'secondary' and 'tertiary', eg:
>
> <div>
> <ul class="primary">
> <li>
> <ul class="secondary">
> <li>
> <ul class="secondary tertiary">
> <li></li>
> </ul>
> </li>
> </ul>
> </li>
> </ul>
> </div>
>
> Can anyone please point out to me what I am doing wrong?
