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样式我这边就不弄了,这个完全看自己的爱好。