Question

我试图遍历树结构。树是JSON对象的数组。如果我在for循环中迭代一切都很好......但是如果我使用$ .each迭代，则迭代对象变为未定义。任何理解这一点的帮助都会很棒。

HTML - 两者相同

<ul id="treeList" class="list-group" style="margin: 0 auto; list-style-type: none;"></ul>

代码 - 工作版

var tree = [{
    "name": "Parent 1",
    "subcat": []
  },
  {
    "name": "Parent 2",
    "subcat": [{
      "name": "child 2",
      "subcat": [{
        "name": "grandchild 2",
        "subcat": []
      }]
    }]
  },
  {
    "name": "Parent 3",
    "subcat": []
  }
];

buildTree($('#treeList'), tree);

function buildTree($list, nodes) {

  for (var i = 0, len = nodes.length; i < len; i++) {
    var $item = $('<li><a href="#">' + nodes[i].name + '</a></li>');

    if (nodes[i].subcat.length) {
      var $subList = $('<ul></ul>');
      $item.append($subList);
      buildTree($subList, nodes[i].subcat);
    }

    $list.append($item);

  }
}

小提琴： https://jsfiddle.net/number40/0vpusefr/

代码 - 不工作：

var tree = [{
    "name": "Parent 1",
    "subcat": []
  },
  {
    "name": "Parent 2",
    "subcat": [{
      "name": "child 2",
      "subcat": [{
        "name": "grandchild 2",
        "subcat": []
      }]
    }]
  },
  {
    "name": "Parent 3",
    "subcat": []
  }
];

buildTree($('#treeList'), tree);

function buildTree($list, nodes) {

  $.each(nodes, function(node) {

    var $item = $('<li><a href="#">' + node.name + '</a></li>');

    if (node.subcat.length) {
      var $subList = $('<ul></ul>');
      $item.append($subList);
      buildTree($subList, node.subcat);
    }

    $list.append($item);

  });
}

小提琴不工作：https://jsfiddle.net/number40/qmLr14k8/

Answer 1

我在你的代码中发现了错误，每个函数的第一个参数是索引。

function buildTree($list, nodes) {

  $.each(nodes, function(index, node) {

    var $item = $('<li><a href="#">' + node.name + '</a></li>');

    if (node.subcat.length) {
      var $subList = $('<ul></ul>');
      $item.append($subList);
      buildTree($subList, node.subcat);
    }

    $list.append($item);

  });

替换它应该有效。

为什么$ .each使数组对象未定义，但for循环工作

1 个答案: