根据返回数据, 迭代数组, 构造HTML结构

首先需要引入jQuery哈!

1. 要求用下面的格式制作目录, 结构如下:

<ul>

  <li>xxxx</li>

  <li>xxxx</li>

  <ul>

     <li>xxxx</li>

     <li>xxxx</li>

     <ul>

        <li>xxxx</li>

        <li>xxxx</li>

     </ul>

  </ul>

</ul>

2. 要求带锚点的, 要使用父节点ID+锚点做为链接

1. 后台返回的数据:

const newDirList = [

  {

    "catalogId": 1,

    "catalogFid": 0,

    "catalogName": "目录",

    "child": [],

    "anchor": ""

  },

  {

    "catalogId": 2,

    "catalogFid": 0,

    "catalogName": "版权信息",

    "child": [],

    "anchor": ""

  },

  {

    "catalogId": 3,

    "catalogFid": 0,

    "catalogName": "第1章",

    "child": [

      {

        "catalogId": 301,

        "catalogFid": 3,

        "catalogName": "第1章第1节",

        "child": [

            {"catalogId": 30101, "catalogFid": 301, "catalogName": "第1章第1节第1段", "child": [], "anchor": ""},

            {"catalogId": 30102, "catalogFid": 301, "catalogName": "第1章第1节第2段", "child": [], "anchor": ""},

            {"catalogId": 30103, "catalogFid": 301, "catalogName": "第1章第1节第3段", "child": [], "anchor": ""},

            {"catalogId": 30104, "catalogFid": 301, "catalogName": "第1章第1节第4段", "child": [], "anchor": ""}

        ],

        "anchor": ""

      },

      {

        "catalogId": 302,

        "catalogFid": 3,

        "catalogName": "第1章第2节",

        "child": [

            {"catalogId": 30201, "catalogFid": 302, "catalogName": "第1章第2节第1段", "child": [], "anchor": "sec01"},

            {"catalogId": 30202, "catalogFid": 302, "catalogName": "第1章第2节第2段", "child": [], "anchor": "sec02"},

            {"catalogId": 30203, "catalogFid": 302, "catalogName": "第1章第2节第3段", "child": [], "anchor": "sec03"},

            {"catalogId": 30204, "catalogFid": 302, "catalogName": "第1章第2节第4段", "child": [], "anchor": "sec04"}

        ],

        "anchor": ""

      },

      {

        "catalogId": 303,

        "catalogFid": 3,

        "catalogName": "第1章第3节",

        "child": [],

        "anchor": ""

      },

      {

        "catalogId": 304,

        "catalogFid": 3,

        "catalogName": "第1章第4节",

        "child": [],

        "anchor": ""

      },

      {

        "catalogId": 305,

        "catalogFid": 3,

        "catalogName": "第1章第5节",

        "child": [],

        "anchor": ""

      }

    ],

    "anchor": ""

  },

  {

    "catalogId": 4,

    "catalogFid": 0,

    "catalogName": "第2章",

    "child": [],

    "anchor": ""

  },

  {

    "catalogId": 6,

    "catalogFid": 0,

    "catalogName": "后记",

    "child": [],

    "anchor": ""

  }

]

2. javaScrip:

 function genLi(name, catalogId, anchor, catalogFid) {

   return `

     <li>

     <a href="${anchor?catalogFid:catalogId}.xhtml${anchor?'#'+anchor:''}">${name}(${anchor?catalogFid:catalogId}.xhtml${anchor?'#'+anchor:''})</a>

     </li>

   `.trim();

 }

 function loopArray (arr) {

   let $ul = $('<ul>');

   arr.forEach(function(v){

     let $li = $(genLi(v.catalogName, v.catalogId, v.anchor, v.catalogFid));

     $ul.append($li);

     if (v.child && v.child.length) {

       $ul.append(loopArray(v.child));

     }

   });

   return $ul.get(0).outerHTML;

 }

 loopArray(newDirList);

3. 生成出的HTML代码:

<ul>

  <li>

    <a href="1.xhtml">目录(1.xhtml)</a>

  </li>

  <li>

    <a href="2.xhtml">版权信息(2.xhtml)</a>

  </li>

  <li>

    <a href="3.xhtml">第1章(3.xhtml)</a>

  </li>

  <ul>

    <li>

      <a href="301.xhtml">第1章第1节(301.xhtml)</a>

    </li>

    <ul>

      <li>

        <a href="30101.xhtml">第1章第1节第1段(30101.xhtml)</a>

      </li>

      <li>

        <a href="30102.xhtml">第1章第1节第2段(30102.xhtml)</a>

      </li>

      <li>

        <a href="30103.xhtml">第1章第1节第3段(30103.xhtml)</a>

      </li>

      <li>

        <a href="30104.xhtml">第1章第1节第4段(30104.xhtml)</a>

      </li>

    </ul>

    <li>

      <a href="302.xhtml">第1章第2节(302.xhtml)</a>

    </li>

    <ul>

      <li>

        <a href="302.xhtml#sec01">第1章第2节第1段(302.xhtml#sec01)</a>

      </li>

      <li>

        <a href="302.xhtml#sec02">第1章第2节第2段(302.xhtml#sec02)</a>

      </li>

      <ul>

        <li>

          <a href="3020201.xhtml">第1章第2节第2段第1行(3020201.xhtml)</a>

        </li>

        <li>

          <a href="3020202.xhtml">第1章第2节第2段第2行(3020202.xhtml)</a>

        </li>

        <li>

          <a href="3020203.xhtml">第1章第2节第2段第3行(3020203.xhtml)</a>

        </li>

        <li>

          <a href="3020204.xhtml">第1章第2节第2段第4行(3020204.xhtml)</a>

        </li>

      </ul>

      <li>

        <a href="302.xhtml#sec03">第1章第2节第3段(302.xhtml#sec03)</a>

      </li>

      <li>

        <a href="302.xhtml#sec04">第1章第2节第4段(302.xhtml#sec04)</a>

      </li>

    </ul>

    <li>

      <a href="303.xhtml">第1章第3节(303.xhtml)</a>

    </li>

    <li>

      <a href="304.xhtml">第1章第4节(304.xhtml)</a>

    </li>

    <li>

      <a href="305.xhtml">第1章第5节(305.xhtml)</a>

    </li>

  </ul>

  <li>

    <a href="4.xhtml">第2章(4.xhtml)</a>

  </li>

  <li>

    <a href="6.xhtml">后记(6.xhtml)</a>

  </li>

</ul>

巴特西

根据返回数据, 迭代数组, 构造HTML结构

最新文章

热门文章