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)第二个，等等。

但是，从我看到的内容中，您在查询中遗漏了一个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");

从评论中更新：

前4个主要项目的孩子......这不是100％明确，但我认为你的意思是：

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

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

或许你左边需要一个ul，右边需要一个...... {/ p>

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

但其中一个应该非常接近你正在寻找的东西。

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

1 个答案: