js递归方式实现无限级目录下的最后一层查找
先来说说为什么要写这个,以来是为了应付客户的(坑爹)需求,二来纯粹是强迫症使然。
客户需求:无限级分类目录下的最后一层的目录样式和其他层不同,并在每个最后一层的目录下的分类边上加上一个链接<a>More</a>,而且链接地址和这个分类的链接地址相同(我只想说这是个奇葩)
分析,首先我想到的是用CSS的伪类来做,可是我很迷茫不知道该怎么做(可能是根本就懒得想),然后我就放弃了,感觉js会更省事些(我也搞不懂我是怎么会这样想的)
好了言归正传,下面是代码时间,一开始,我只是用选择判断做的,很坑:
无限级分类导航栏最后一层判断方法。只有五层,这样写太累了 $("ul.header-nav>li>ul>li>ul>li").each(function(){ var $current = $(this); if( $current.children("ul").size() > 0){ var $current1 = $current.children("ul").children("li"); if($current1.children("ul").size() > 0 ){ var $current2 = $current1.children("ul").children("li"); if($current2.children("ul").size() > 0 ){ var $current3 = $current2.children("ul").children("li"); console.log(5); $current3.each(function(){ $(this).append("<a class=‘hrefMore‘ href=‘‘>More</a>"); }) }else{ console.log(4); $current2.each(function(){ $(this).append("<a class=‘hrefMore‘ href=‘‘>More</a>"); }) } }else{ console.log(3); $current1.each(function(){ $(this).append("<a class=‘hrefMore‘ href=‘‘>More</a>"); }) } }else{ $current.each(function(){ $(this).append("<a class=‘hrefMore‘ href=‘‘>More</a>"); }) } })
改进之后的递归方法:
//递归遍历 function lastLvGet($current0){ var $current = $current0.children(‘li‘); $current.each(function(){ if($(this).children(‘ul‘).size() > 0 ){ lastLvGet($(this).children(‘ul‘)); }else{ $(this).append("<a class=‘hrefMore‘ href=‘‘>More</a>"); return; } }) } //从3层开始查找最后一层 $("ul.header-nav>li>ul>li>ul").each(function(){ lastLvGet($(this)); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。