将类添加到 ;基于嵌套列表中的级别
<div id="ContentLeftNav"><ul class="menu">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class="expandNav ">Test Page</a>
<ul class="submenu">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class="expandNav2">Test Page</a>
<ul class="submenu2">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class=" ">Test Page</a></li>
</ul>
</li>
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class="last"><a href="#" class=" ">Test Page</a></li>
</ul>
</li>
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class="expandNav">Test Page</a>
<ul class="submenu">
<li class=""><a href="#" class="expand2">Test Page</a></li>
<ul class="submenu2">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class=" ">Test Page</a></li>
</ul>
<li class=""><a href="#" class=" ">Test Page</a></li>
</ul>
</li>
<li class="last"><a href="#" class=" ">Test Page</a></li></ul></div>
我正在寻找 jQuery 脚本,如果它有一个基于无序列表中级别的
,它将向
添加一个类。因此,所有
+
$('#ContentLeftNav ul').each(function() {
$(this).find('li:has(ul)').each(function(i) {
$(this).find('a').addClass('expandNav' + (i+1));
});});
我怎样才能改变它来寻找它所在的级别?
<div id="ContentLeftNav"><ul class="menu">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class="expandNav ">Test Page</a>
<ul class="submenu">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class="expandNav2">Test Page</a>
<ul class="submenu2">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class=" ">Test Page</a></li>
</ul>
</li>
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class="last"><a href="#" class=" ">Test Page</a></li>
</ul>
</li>
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class="expandNav">Test Page</a>
<ul class="submenu">
<li class=""><a href="#" class="expand2">Test Page</a></li>
<ul class="submenu2">
<li class=""><a href="#" class=" ">Test Page</a></li>
<li class=""><a href="#" class=" ">Test Page</a></li>
</ul>
<li class=""><a href="#" class=" ">Test Page</a></li>
</ul>
</li>
<li class="last"><a href="#" class=" ">Test Page</a></li></ul></div>
I'm looking for jQuery script that will add a class to the <a>
if it has a <ul>
based on the level it is in the unordered list. So all <a>
+ <ul>
Level 1 would be "expandNav1" and level 2 would be "expandNav2" and level 3 would be "expandNav3" and so on. The script I'm using now is not working that way. It adds a new number on every <a>
with <ul>
.
$('#ContentLeftNav ul').each(function() {
$(this).find('li:has(ul)').each(function(i) {
$(this).find('a').addClass('expandNav' + (i+1));
});});
How can I change it to look for level it is in?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以在每个链接上使用与
.length
绑定的.parents()
函数:但如果您只是将其用于样式设置,则可能需要考虑使用纯 CSS ,并完全跳过 JS:
更新:
我想我误解了原来的问题。如果您使用
.expandNav
类来标记用于显示/隐藏更详细信息的链接(可扩展的树视图,如果您愿意的话),并且您只需要直接位于 < code>来获取类,那么您实际上想要更多类似这样的东西:
希望这有帮助!
You could use the
.parents()
function tied with.length
on each link:But if you're just using this for styling, you might want to consider using plain CSS, and skipping the JS altogether:
Update:
I think I misunderstood the original question. If you're using the
.expandNav
class to mark links that are used to show/hide more detailed info (an expandable tree view, if you will), and you only want the links that directly precede<ul>
s to get the class, then you actually want something more like this:Hope this helps!
您可以使用递归(= 调用自身)函数来完成此操作:
You can do it with a recursive (= calls itself) function: