向嵌套列表类添加级别深度
Adding level depth to class of nested lists
我有这样的嵌套列表:
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<ul>
<li>sub-subitem1</li>
</ul>
</li>
</ul>
</li>
<li>item 3
<ul>
<li>subitem 1</li>
</ul>
</li>
</ul>
有没有什么方法可以根据它们的深度级别将类添加到中,这样输出就是这样的?
<ul class="level-0">
<li>item 1</li>
<li>item 2
<ul class="level-1">
<li>subitem 1</li>
<li>subitem 2</li>
<ul class="level-2">
<li>sub-subitem1</li>
</ul>
</li>
</ul>
</li>
<li>item 3
<ul class="level-1">
<li>subitem 1</li>
</ul>
</li>
</ul>
我是jQuery的新手,尝试过这个:
$("ul").each(function(index, element){$(element).attr("class", "level-" + index);});
但它只根据他们的指数来计算ul。非常感谢您的帮助!
试试这个:
$('ul').each(function() {
var depth = $(this).parents('ul').length;
$(this).addClass('level-' + depth);
});
请参阅http://jsfiddle.net/alnitak/YSZFm/
如果您只有3个级别,请尝试以下操作:
$('ul').addClass('level-0');
$('ul').find('ul').removeClass('level-0').addClass('level-1');
$('ul').find('ul').find('ul').removeClass('level-0').removeClass('level-1').addClass('level-2');
http://jsfiddle.net/fallen888/2rATE/
要获得更动态的解决方案,请尝试以下操作:
$("ul").each(function(index, element) {
var parents = $(this).parents('ul');
var level = -1;
if (parents.length > 0) {
var parentClass = $(parents.get(0)).attr('class');
level = parseInt(parentClass.substr(parentClass.indexOf('level-') + 6, 1));
}
$(this).addClass('level-' + (level + 1));
});
http://jsfiddle.net/fallen888/2rATE/1/
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何添加浮动和非浮动,其他
- 添加文字和评论功能更新Div
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 在函数中添加数组元素的数值
- 如何将歌曲添加到jPlayer
- 在html Select中添加搜索
- Java脚本时间添加
- FabricJs-限制主对象内添加对象的移动区域
- 如何将深度链接添加到HTML5 Up模板中?
- 轻松添加多个层次的深度JSON
- 向嵌套列表类添加级别深度
- 在console.log中添加深度参数用于递归