How can I edit nested Lists with JQuery/Javascript?

Question

I need to figure out a way to edit only the nested lists of the first four members of my main list.

I found a way to edit the first four members of the list but I can't seem to get into deeper levels of the list with this code.

This is the css code that I need to edit for the first four items.

ul.menu ul ul { margin:0 0 0 10px; left:-13.4em; right:13em; }

The way I've been trying is using this code

$("ul.menu").children().eq(0).addClass("test");
$("ul.menu").children().eq(1).addClass("test");
$("ul.menu").children().eq(2).addClass("test");
$("ul.menu").children().eq(3).addClass("test");

but now I cant just use ul.menu ul ul in the beginning part (or at least it seems so to me.) So this code is only hitting the first level of my list.

is there anyway to get it to target just the first four. What I would want them to have is this css

ul.menu ul ul { margin:0 0 0 10px; left:12em; right:0em; }

(Something like this is what I'm trying to accomplish)

$("ul.menu ul ul").children().eq(0).css("left", "12em");

added html code of the first item of the main list (There are 6 more like this so I didn't want to add them all)

    href="#">ATV</a>
    <ul class="drop-down " >
<li ID="li_139" class="node"><a ID="a_ID_0_0_-1_-1_139_-2" class="amenu"  href="#">Accessories</a>
<ul class="drop-down " >
<li ID="li_1504" class="leaf"><a ID="a_ID_0_0_0_-1_1504_-2" class="amenu"  href="#">Camel Back</a></li>
<li ID="li_297" class="leaf"><a ID="a_ID_0_0_1_-1_297_-2" class="amenu"  href="#">Glasses</a></li>
<li ID="li_63" class="leaf"><a ID="a_ID_0_0_2_-1_63_-2" class="amenu"  href="#">Gloves</a></li>
<li ID="li_1449" class="leaf"><a ID="a_ID_0_0_3_-1_1449_-2" class="amenu"  href="#">Goggles</a></li>
<li ID="li_62" class="node"><a ID="a_ID_0_0_4_-1_62_-2" class="amenu"  href="#">Helmets</a>
<ul class="drop-down " >
<li ID="li_1347" class="leaf"><a ID="a_ID_0_0_4_0_1347_-2" class="amenu"  href="#">Air Attack Blaze Graphic</a></li>
<li ID="li_1346" class="leaf"><a ID="a_ID_0_0_4_1_1346_-2" class="amenu"  href="#">Air Attack Calamity</a></li>
<li ID="li_1348" class="leaf"><a ID="a_ID_0_0_4_2_1348_-2" class="amenu"  href="#">901 Demon Fire</a></li>
<li ID="li_1349" class="leaf"><a ID="a_ID_0_0_4_3_1349_-2" class="amenu"  href="#">901 Tempest Graphic</a></li>
<li ID="li_1350" class="leaf"><a ID="a_ID_0_0_4_4_1350_-2" class="amenu"  href="#">Roost X Gothic</a></li>
<li ID="li_1351" class="leaf"><a ID="a_ID_0_0_4_5_1351_-2" class="amenu"  href="#">Roost X Tribe II Graphic</a></li>
<li ID="li_1443" class="leaf"><a ID="a_ID_0_0_4_6_1443_-2" class="amenu"  href="#">Rush Fiction</a></li>
<li ID="li_1444" class="leaf"><a ID="a_ID_0_0_4_7_1444_-2" class="amenu"  href="#">Rush Star</a></li>
<li style='border-bottom: none;'ID="li_1352" class="leaf"><a ID="a_ID_0_0_4_8_1352_-2" class="amenu"  href="#">Stadium MX</a></li>


    </ul>

Answer 1

The .eq(0) references the first element. .eq(1) the second, etc.

However, from what I can see, you are missing one ul in your query:

jQuery("ul.menu ul").children().eq(0).addClass("test");

That way you change the 1st element of the last level of 'ul' (but in all those lists.) Then repeat for the following element with .eq(1) :

jQuery("ul.menu ul").children().eq(1).addClass("test");

Note that to select the first 4 elements you can also use a filter function:

jQuery("ul.menu ul").children().filter(function(index, element){return index <= 3;}).addClass("test");

---

Update from the comment:

The children of the first 4 main items... It is not 100% clear, but I think what you mean is this:

var first_four = function(index, element){return index <= 3;};
jQuery("ul.menu").filter(first_four).children("ul").children("ul").addClass("test");

Maybe you'd only want one children("ul") .

Or maybe you need one ul on the left and one on the right...

jQuery("ul.menu ul").filter(first_four).children("ul").addClass("test");

But one of those should be really close to what you're looking for.