如何使用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");

但是其中之一應該確實與您要尋找的東西接近。