zoukankan      html  css  js  c++  java
  • 博客园自定义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安排不当导致的::>_<::鬼知道他们为啥把这么多子元素一大波的往下排……

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

    供大家参考……

  • 相关阅读:
    【NIO】IO与NIO的区别
    【在线工具】java开发常用在线工具
    【JVM】符号引用和直接引用
    【多线程】公平锁/非公平锁、乐观锁/悲观锁
    【Jenkins、sonar】
    开源软件记录
    Git Flow
    CF1324A Yet Another Tetris Problem 题解
    洛谷 P1199 三国游戏 题解
    CF33C Wonderful Randomized Sum 题解
  • 原文地址:https://www.cnblogs.com/yisaer/p/7910582.html
Copyright © 2011-2022 走看看