如何从嵌套数组生成ul li？递归实现嵌套无序列表

问题解答 #

1. 解析数组生成嵌套HTML无序列表
   核心逻辑是让数组的嵌套结构与HTML列表结构一一对应：每一层数组对应一个<ul>标签，数组中的每个对象对应一个<li>标签；若对象包含非空的_children数组，则在当前<li>内部生成对应的子<ul>列表。

2. 递归遍历嵌套子元素
   编写递归函数处理每个层级的数组：函数接收数组参数后，遍历数组生成<li>，同时检查当前元素是否存在非空的_children，若有则再次调用自身处理子数组，将返回的子列表HTML插入到当前<li>中，以此实现深度遍历所有嵌套元素。

修正后的完整代码 #

const data = [
    { name: '125313-7j' },
    {
        name: '584996-s7',
        _children: [
            { name: '747773-jw' },
            {
                name: '377526-zg',
                _children: [
                    { name: '955330-wp' },
                    { name: '343693-9x' }
                ]
            },
            { name: '638483-y2' }
        ]
    },
    { name: '306979-mx' },
    { name: '066195-o1', _children: [] }
];

$(function() {
    // 递归生成列表的核心函数
    function generateList(items) {
        // 空数组直接返回空字符串，避免生成无效标签
        if (!items || items.length === 0) return '';
        
        let html = '<ul>';
        items.forEach(item => {
            html += `<li><div>${item.name}</div>`;
            // 仅当_children存在且不为空时，递归生成子列表
            if (item._children && item._children.length > 0) {
                html += generateList(item._children);
            }
            html += '</li>';
        });
        html += '</ul>';
        return html;
    }

    const innerHtml = generateList(data);
    // 将生成的HTML插入到页面目标容器中（示例为body）
    $('body').append(innerHtml);
    // 控制台打印结果便于调试
    console.log(innerHtml);
});

代码关键点说明 #

• 递归函数generateList：负责处理任意层级的数组，返回对应层级的列表HTML字符串
• 空数组判断：避免为_children: []的元素生成空的<ul>标签
• 修正拼写错误：原代码中innerHtml与innerHTML大小写不一致的问题已修复
• DOM插入：最终将生成的完整HTML插入到页面中，而非仅拼接字符串

实际生成的HTML输出 #

<ul>
  <li><div>125313-7j</div></li>
  <li><div>584996-s7</div>
    <ul>
      <li><div>747773-jw</div></li>
      <li><div>377526-zg</div>
        <ul>
          <li><div>955330-wp</div></li>
          <li><div>343693-9x</div></li>
        </ul>
      </li>
      <li><div>638483-y2</div></li>
    </ul>
  </li>
  <li><div>306979-mx</div></li>
  <li><div>066195-o1</div></li>
</ul>

内容的提问来源于stack exchange，提问作者usernameabc