关于递归函数生成嵌套列表及jQuery实现代码的技术咨询

Got it, let's tackle this nested list generation problem step by step. First, I spot a small issue in your sample data: the last item (id: 880100) is missing a parent_id — I’ll assume it’s meant to be 8801 (child of the "balloons" item) for this example, but the code below will work as long as all items have valid parent references.

Step 1: Convert Flat Data to a Tree Structure #

First, we’ll transform your flat array into a hierarchical tree. This makes recursive traversal way more efficient than searching the flat array every time we need to find children.

Step 2: Build the Recursive List Generator #

We’ll write a recursive function that takes a set of nodes and generates the corresponding <ul>/<li> elements. If a node has children, it will call itself to generate the nested sub-list.

Full Working Code #

<!-- Add a container to your HTML where the list will render -->
<div id="nested-list-container"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
jQuery(document).ready(function () {
  // Fixed sample data (added parent_id to the last item)
  var data = [
    { "id": "88", "name": "test", "parent_id": "0" },
    { "id": "8805", "name": "dsdsdsdsdsd", "parent_id": "88" },
    { "id": "8801", "name": "balloons", "parent_id": "88" },
    { "id": "8802", "name": "Other", "parent_id": "88" },
    { "id": "8804", "name": "Parac", "parent_id": "88" },
    { "id": "8803", "name": "Parts 11.02.", "parent_id": "88" },
    { "id": "880100", "name": "(2007-) air...", "parent_id": "8801" }
  ];

  // Helper function to build a tree from flat data
  function buildTree(items) {
    const tree = [];
    const nodeMap = {};

    // First, create a map of all nodes by their id
    items.forEach(item => {
      nodeMap[item.id] = { ...item, children: [] };
    });

    // Then, attach each node to its parent
    items.forEach(item => {
      const parent = nodeMap[item.parent_id];
      if (parent) {
        parent.children.push(nodeMap[item.id]);
      } else {
        // If no parent found (parent_id = 0), add to root of the tree
        tree.push(nodeMap[item.id]);
      }
    });

    return tree;
  }

  // Recursive function to generate nested list elements
  function generateNestedList(nodes) {
    if (!nodes.length) return '';

    let list = '<ul>';
    nodes.forEach(node => {
      list += `<li>${node.name}`;
      // If node has children, recursively generate sub-list
      if (node.children.length) {
        list += generateNestedList(node.children);
      }
      list += '</li>';
    });
    list += '</ul>';

    return list;
  }

  // Build the tree and render the list
  const tree = buildTree(data);
  const nestedListHtml = generateNestedList(tree);
  $('#nested-list-container').html(nestedListHtml);
});
</script>

Key Notes: #

• Tree Structure: The buildTree function creates a map of nodes so we can quickly look up parent nodes, then assembles the hierarchy. This is O(n) time complexity, which is way better than repeatedly searching the flat array.
• Recursion: The generateNestedList function checks if a node has children — if it does, it calls itself to generate the sub-list. The recursion stops when a node has no children.
• Flexibility: If your parent_id values use something other than "0" for root nodes, just adjust the condition in buildTree where we check for missing parents.

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