[英]How can I edit nested Lists with JQuery/Javascript?
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. 这是前四项需要编辑的CSS代码。
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. 但是现在我不能在开头使用ul.menu ul ul(或者至少在我看来是这样。)因此,此代码仅在列表的第一级上起作用。
is there anyway to get it to target just the first four. 无论如何,有没有办法让它只针对前四个目标。 What I would want them to have is this css
我希望他们拥有的是这个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) 在主列表的第一项中添加了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>
The .eq(0)
references the first element. .eq(0)
引用第一个元素。 .eq(1)
the second, etc. .eq(1)
第二个, .eq(1)
。
However, from what I can see, you are missing one ul
in your query: 但是,据我
ul
,您在查询中缺少一个ul
:
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)
: 这样,您可以更改“ ul”的最后一个级别的第一个元素(但在所有这些列表中。)然后使用
.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: 请注意,要选择前4个元素,您还可以使用过滤器功能:
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")
. 也许您只想要一个
children("ul")
。
Or maybe you need one ul
on the left and one on the right... 或者,也许您需要在左边一个
ul
在右边一个...
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. 但是其中之一应该确实与您要寻找的东西接近。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.