makoshen 2021-10-25 15:54 采纳率: 100%
浏览 46
已结题

后台json数据已经获取成功到前台JS中,求怎么在页面上能显示父子关系的DIV格式JS拼接语句?

var data=[
{ID: "1", PId: "0", Name: "大类1"},
{ID: "2", PId: "1", Name: "小类a"},
{ID: "3", PId: "1", Name: "小类b"},
{ID: "4", PId: "1", Name: "小类c"},
{ID: "5", PId: "0", Name: "大类2"},
{ID: "6", PId: "5", Name: "小类1"},
{ID: "7", PId: "5", Name: "小类2"},
{ID: "8", PId: "5", Name: "小类3"},
]

页面上有个

 <div id="content"></div>

希望使用


求怎么循环数组拼接,让页面div变成需求的这样父子关系div,如下
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">大类1</li>
    <li>大类2</li>
    <li>大类3</li>
    <li>大类...</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">小类a,小类b,小类c</div>
    <div class="layui-tab-item"> 小类1,小类2,小类3</div>
    <div class="layui-tab-item">大类3的子菜单内容</div>
    <div class="layui-tab-item">对于大类下子菜单内容...</div>
  </div>
</div>

  • 写回答

4条回答 默认 最新

  • 崽崽的谷雨 2021-10-25 16:03
    关注

    先把数据处理成,层级的数据。然后递归循环

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 11月3日
  • 已采纳回答 10月26日
  • 创建了问题 10月25日

悬赏问题

  • ¥15 CST仿真别人的模型结果仿真结果S参数完全不对
  • ¥15 请问在阿里云服务器中怎么利用数据库制作网站
  • ¥60 ESP32怎么烧录自启动程序
  • ¥50 html2canvas超出滚动条不显示
  • ¥15 java业务性能问题求解(sql,业务设计相关)
  • ¥15 52810 尾椎c三个a 写蓝牙地址
  • ¥15 elmos524.33 eeprom的读写问题
  • ¥15 用ADS设计一款的射频功率放大器
  • ¥15 怎么求交点连线的理论解?
  • ¥20 软件开发方法学习来了