根据返回数据, 迭代数组, 构造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:

 1 function genLi(name, catalogId, anchor, catalogFid) {
 2   return `
 3     <li>
 4     <a href="${anchor?catalogFid:catalogId}.xhtml${anchor?'#'+anchor:''}">${name}(${anchor?catalogFid:catalogId}.xhtml${anchor?'#'+anchor:''})</a>
 5     </li>
 6   `.trim();
 7 }
 8 function loopArray (arr) {
 9   let $ul = $('<ul>');
10   arr.forEach(function(v){
11     let $li = $(genLi(v.catalogName, v.catalogId, v.anchor, v.catalogFid));
12     $ul.append($li);
13     if (v.child && v.child.length) {
14       $ul.append(loopArray(v.child));
15     }
16   });
17   return $ul.get(0).outerHTML;
18 }
19 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>

 

posted @ 2018-10-30 15:19  roseforyou  阅读(323)  评论(0)  编辑  收藏  举报