递归函数生成嵌套列表

Question

我有这个代码使用jQuery生成嵌套列表：

HTML和JavaScript

＆＃13;

＆＃13;

jQuery(document).ready(function () {
	 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-) airs", "parent_id": "8801" },
                { "id": "880110", "name": "(-2006) Glis", "parent_id": "8801" },
                { "id": "880190", "name": "(-2006) Other", "parent_id": "8801" }
            ];
 
 var endMenu = getMenu("0");

            function getMenu(parentId) {

                return data.filter(function (node) { return (node.parent_id === parentId); }).sort(function (a, b) { return a.index > b.index }).map(function (node) {
                    var exists = data.some(function (childNode) { return childNode.parent_id === node.id; });
                    //console.log("exists is now " + exists);
                    var subMenu = (exists) ? '<ul>' + getMenu(node.id).join('') + '</ul>' : "";
                    //console.log("node name is now " + subMenu);
                    return '<li><a href="#">' + node.name + subMenu + '</a></li>';
                });
            }
            $('.menu').html('<ul class="products">' + endMenu.join('') + '</ul>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu"></div>

＆＃13;

＆＃13;

＆＃13;

我遇到的问题是代码会生成一些空的a标记元素，如下所示：

<ul><a href="#"></a><li>

我试图逐步完成代码，但无法找出问题所在。

Answer 1

可能与您在标签内附加子菜单有关。我在链接后移动了子菜单的附加，并且它停止将空链接放在那里。

＆＃13;

＆＃13;

jQuery(document).ready(function() {
  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-) airs",
      "parent_id": "8801"
    },
    {
      "id": "880110",
      "name": "(-2006) Glis",
      "parent_id": "8801"
    },
    {
      "id": "880190",
      "name": "(-2006) Other",
      "parent_id": "8801"
    }
  ];

  var endMenu = getMenu("0");

  function getMenu(parentId) {
    var children = data.filter(function(node) {
      return (node.parent_id === parentId);
    });

    return children.map(function(node) {
      var subMenu = '';

      if (data.find(function(potentialChild) {
          return potentialChild.parent_id === node.id
        })) {
        subMenu = '<ul>' + getMenu(node.id).join('') + '</ul>';
      }

      return '<li><a href="#">'+ node.name +'</a>'+ subMenu +'</li>';
    });
  }
  $('.menu').html('<ul class="products">' + endMenu.join('') + '</ul>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu"></div>

＆＃13;

＆＃13;

＆＃13;