先来说说为什么要写这个,以来是为了应付客户的(坑爹)需求,二来纯粹是强迫症使然。
客户需求:无限级分类目录下的最后一层的目录样式和其他层不同,并在每个最后一层的目录下的分类边上加上一个链接<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));