makoshen 2021-10-25 07: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 08:03
    关注

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

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

报告相同问题?

问题事件

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

悬赏问题

  • ¥100 有能够实现人机模式的c/c++代码,有图片背景等,能够直接进行游戏
  • ¥20 校园网认证openwrt插件
  • ¥15 以AT89C51单片机芯片为核心来制作一个简易计算器,外部由4*4矩阵键盘和一个LCD1602字符型液晶显示屏构成,内部由一块AT89C51单片机构成,通过软件编程可实现简单加减乘除。
  • ¥15 某东JD算法逆向算法
  • ¥15 求GCMS辅导数据分析
  • ¥30 SD中的一段Unet下采样代码其中的resnet是谁跟谁进行残差连接
  • ¥15 Unet采样阶段的res_samples问题
  • ¥60 Python+pygame坦克大战游戏开发实验报告
  • ¥15 R语言regionNames()和demomap()无法选中中文地区的问题
  • ¥15 Open GL ES 的使用
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部