javascript - 为什么 $.each 使数组对象未定义，但 for 循环有效

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);

  }
} 

fiddle : 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);

  });
}

fiddle 不工作: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);

  });

用这个替换它应该有效。