我有一个带有嵌套LI项的可排序列表.我正在寻找为组中的每个LI创建一个ID.
例.如果我有这个:
<li class="main"> Cat 0 <ul class="subCat"> <li>Subcat 0 <ul class="subCat"> <li>Sub-Subcat 0 <ul class="subCat"></ul> </li> </ul> </li> <li>Subcat 1</li> </ul> </li>
好的,那些ul.subCat用于嵌套其他li项目.我想创建一个函数来向li元素及其li子元素添加ID.每次订单更改都会调用此函数.
结果应该是这样的:
<li class="main" id="cat_0"> Cat 0 <ul class="subCat"> <li id="cat_0_0">Subcat 0 <ul class="subCat"> <li id="cat_0_0_0">Sub-Subcat 0 <ul class="subCat"></ul> </li> </ul> </li> <li id="cat_0_1">Subcat 1</li> </ul> </li>
并且,对于每个li.main元素重复故事达到4级(0到3).
我的实际代码就是这个:
// level 0 target = $('#ulMenu >li'); for( i=0; i<=target.length-1; i++ ){ target.eq(i).attr('id','cat_' + i).addClass('main'); } // level 1 //------------------------------------------------------------------ $('#ulMenu >li.main').each(function(){ target = $(this).children('ul').children('li'); for( i=0; i<=target.length-1; i++ ){ father = target.eq(i).parent('ul').parent('li').attr('id').split('_')[1]; target.eq(i).attr('id','cat_' + padre + '_' + i); }
解决方法
这是一个递归的解决方案,可以满足你想要的任何深度:
function menuID(el,base) { base = base || 'cat'; $(el).filter('li').each(function(i) { this.id = base + '_' + i; menuID($(this).children('ul').children('li'),this.id); }); }; menuID('.main');
见http://jsfiddle.net/alnitak/XhnYa/
(function($) { $.fn.menuID = function(base) { base = base || 'cat'; this.filter('li').each(function(i) { this.id = base + '_' + i; $(this).children('ul').children('li').menuID(this.id); }); }; })(jQuery); $('.main').menuID();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。