博客园自定义js，每6个div外包div……

因为之前的博客倒闭了，然后搬到博客园来……

但是博客园的默认主题实在不符合我的性格……

然后我开始了面目全非的修改工作……

先是自定义css……

在原有的dom的基础上开始超级大的样式重定义……

然后就定义成现在这样子啦::>_<::个人感觉还ok

 

但是……在dom上，遇到了一个坑，就是我需要……改变它默认的dom结构，就是在几个div层外包裹一个div，没想到却……搞了一下午::>_<::

 

首先，比较庆幸的是，博客园支持jq……这是第一次感觉jq的作用还是蛮大的，这次情况实在是太尴尬了

先看看博客园默认的dom结构吧：

<div class="day">
<div class="dayTitle"></div>
<div class="postTitle"></div>
<div class="postCon"></div>
<div class="clear"></div>
<div class="postDesc"></div>
<div class="clear"></div>
<!-以上是一天内第一篇文章->
<div class="dayTitle"></div>
<div class="postTitle"></div>
<div class="postCon"></div>
<div class="clear"></div>
<div class="postDesc"></div>
<div class="clear"></div>
<!-以上是一天内第二篇文章->
</div>

 

是的……他们的dom结构就是这一波波的div一波波的排下去……

然后我现在需要的是一天内（.day）的每一天文章，也就是每6个div（.dayTitle，.postTitle，.postCon，.clear，.postDesc）的外层都套一个父级div。

这看上去非常简单……看上去::>_<::

 

然而其实试来试去，各种方案都……最终是找到了完美的解决方案，先看看代码：

$(document).ready(function(){
$(".day").each(function(i){ //遍历每一个day
 $(".day").find(".dayTitle,.postTitle,.postCon,.postDesc,.clear").slice(i*6,i*6+6).wrapAll("<div class='post'></div>");
//每一个day下面开始寻找各个div，然后每六个为一组，然后在外面包一层div，class是post
});
});

嗯……看上去是没毛病的……

一般来说我们平时很少会碰到这么纠结的情况，毕竟这种情况我们如果能够修改dom那就在外层包一层div就行啦

但是现在的情况不是我们无法修改dom嘛

只能通过js的方式……

 

其实这也是博客园这边的dom安排不当导致的::>_<::鬼知道他们为啥把这么多子元素一大波的往下排……

 

好吧，仅供记录啦……虽然很简单……万一贼坑的下次真的遇到了呢::>_<::

 

供大家参考……

转载于:https://www.cnblogs.com/yisaer/p/7910582.html