wordpress对于php的开发者来说相信并不陌生,它的最大优势是开源且全世界有非常庞大的开发者和追求者。
本人也是一个wordpress的开发者,也开发过主题,但仅仅限制自己用。
这篇文章是要介绍一下wordpress的评论嵌套。
相信开发过主题的人都知道这个功能,非常好用的一个功能,但是不知道朋友们发现没有,在嵌套评论多了的时候,会不会就显得不是那么好看了。
那么我们今天就来用jquery来改造一下嵌套的代码结构。
提前说一下,wordpress嵌套评论的代码格式是这样的,如果你的不是这样的格式,可以做一些修改,或者是直接修改我的jquery代码。
1 <ul class="comment-list"> 2 <li class ="comment"> 3 <div class=".....">这里面是一些用户信息、评论信息和相关功能,就不写了</div> 4 <ul class="children"> 5 <li class ="comment"> 6 <div class=".....">这里面是一些用户信息、评论信息和相关功能,就不写了</div> 7 <ul class="children"> 8 <li class ="comment"> 9 <div class=".....">这里面是一些用户信息、评论信息和相关功能,就不写了 </div> 10 </li> 11 </ul> 12 </li> 13 </ul> 14 </li> 15 </ul>
这是一个三层嵌套的样式,接下来的代码就要对这个样式进行重新构造了。
1 var comment = $('.comment-list').children('.comment'); 2 comment.children('ul').each(function(){ 3 var self = $(this); 4 if ($(this).children('li').length == 1) { 5 var li = $(this).find('.children>li').clone(); 6 $(this).append(li); 7 }else if($(this).children('li').length > 1) { 8 $(this).children('li').each(function(index){ 9 index = index + 1; 10 var div = $('<ul>', {class: 'anchie_' + index}); 11 var li_2 = $(this).find('.children>li').clone(); 12 var li_1 = $(this).clone(); 13 self.append(div); 14 div.append(li_1); 15 div.append(li_2); 16 $(this).remove(); 17 }) 18 } 19 $(this).find('.children').remove(); 20 })
把以上代码复制到你主题的js文件中,然后在查看一下你的代码结构,是不是发生变化了。
css样式我这边就不弄了,这个完全看自己的爱好。