如何使用JQuery / Javascript编辑嵌套列表？

Question

我需要找出一种方法来仅编辑主列表的前四个成员的嵌套列表。

我找到了一种编辑列表的前四个成员的方法，但是使用此代码似乎无法深入到列表的更深层次。

这是前四项需要编辑的CSS代码。

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

我一直在尝试的方式是使用此代码

$("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");

但是现在我不能在开头使用ul.menu ul ul（或者至少在我看来是这样。）因此，此代码仅在列表的第一级上起作用。

无论如何，有没有办法让它只针对前四个目标。 我希望他们拥有的是这个CSS

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

（这就是我要完成的工作）

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

在主列表的第一项中添加了html代码（还有6种类似的代码，所以我不想全部添加）

    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

.eq(0)引用第一个元素。 .eq(1)第二个， .eq(1) 。

但是，据我ul ，您在查询中缺少一个ul ：

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

这样，您可以更改“ ul”的最后一个级别的第一个元素（但在所有这些列表中。）然后使用.eq(1)重复以下元素：

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

请注意，要选择前4个元素，您还可以使用过滤器功能：

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

---

从评论更新：

前四个主要项的子项...尚不完全清楚，但我认为您的意思是：

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

也许您只想要一个children("ul") 。

或者，也许您需要在左边一个ul在右边一个...

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

但是其中之一应该确实与您要寻找的东西接近。