MorningZ's right. To simplify things I'd do this: $('div') .find('>ul').addClass('primary'); .find('>li >ul').addClass('secondary') .find('>li >ul').addClass('tertiary') .find('>li >ul').addClass('quaternary') .find('>li >ul').addClass('quinary')
cheers, - ricardo On Apr 15, 4: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?