用html文件實現一個簡單的遍歷數組並輸出到頁面上面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>html.forEach</title> <style> * { margin: 0; padding: 0; } html { width: 100%; } .item-title { font-size: 26px; font-weight: bold; } .item-question { margin-top: 20px; font-weight: bold; font-size: 20px; } .item-answer { margin-top: 10px; font-size: 18px; margin-left: 10px; line-height: 28px; } li { list-style: none; } </style> </head> <body> <div class="recommend-list"> <ul> <li> <div> <p class="item-title"></p> <p class="item-question"></p> <p class="item-answer"></p> </div> </li> </ul> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> var mainStr = '' //自定義數組 var mainArr = [ { title: '這是第一級', children: [ { question: '這是第一級1-1', answer: '這是第一級1-1描述', }, { question: '這是第一級1-2', answer: '這是第一級1-2描述', }, ], }, { title: '這是第二級', children: [ { question: '這是第二級2-1', answer: '這是第二級2-1描述', }, { question: '這是第二級2-2', children: ['這是第二級2-2-1', '這是第二級2-2-2'], }, ], }, { title: '這是第三級', children: [ { question: '這是第三級3-1', answer: '這是第三級3-1描述', }, ], }, ] /* *.join('')的作用是去掉map循環后返回多余的逗號 */ mainArr.forEach((e) => { // forEach遍歷大數組 mainStr += ` <li> <div> <p class="item-title">${e.title}</p> ${e.children.map((element, index) => { // 用來遍歷每一項中的子列表 let ele = ` <p class="item-question">${index + 1}.${element.question}</p>` if(element.children != undefined){element.children.forEach((item) => { // 遍歷子列表中的子列表 ele += `<p class="item-answer">${item}</p>` })} else { ele += `<p class="item-answer">${element.answer}</p>` } return ele }).join('')} </div> </li>` }) //拼接完字符串數組后用innerHTML把它渲染到父元素中 document.querySelector('ul').innerHTML = mainStr </script> </html>
展示效果：
參考：https://blog.csdn.net/hh18700418030/article/details/106722474