[jQuery] Strange parent > child selector behaviour
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?