Question

目前，我正在尝试为一组控件提供更动态的界面，使用PHP与MySQL数据库连接，并形成一个json字符串，并将其发送到客户端脚本。

关于它的一切都有效，除了我似乎无法在其自身内嵌函数调用。我的怀疑告诉我可能它是一个可变范围的问题，但我不知道如何进行测试，如果这甚至是原因。

JSON：

{
  "Categories": {
    "2": {
      "Name": "Store Name",
      "Parent": "0",
      "Prefix": "SN",
      "Published": "1"
    },
    "5": {
      "Name": "Apparel",
      "Parent": "2",
      "Prefix": "A",
      "Published": "1"
    },
    "27": {
      "Name": "Hats",
      "Parent": "5",
      "Prefix": "H",
      "Published": "1"
    }
  }
}

JQuery的：

(function(){

  function jint_categories(parentId, categoryData) {
    var jObjUL = $('<ul />');
    $.each(categoryData.Categories, function(key_i, val_i) {
      if(parseInt(val_i.Parent) == parseInt(parentId)) {
        var jObjLI = $('<li class="category" />').appendTo(jObjUL);
        var jObjDiv = $('<div class="controls" />').appendTo(jObjLI);
        $('<a href="#" class="view">&nbsp;</a>').appendTo(jObjDiv);
        $('<a href="" class="edit">'+val_i.Name+'</a>').appendTo(jObjDiv);
        jint_categories(val_i.Parent, categoryData).appendTo(jObjLI);
      }
    });
    return jObjUL;
  }

  var jJsonData, jJsonDiv;

  $(document).on('ready', function() {

    // Prepare Interface Container
    jJsonDiv = $('#jint-categories');
    jJsonData = $.parseJSON(jJsonDiv.html());
    jJsonDiv.empty();

    // Populate Interface Container
    $(jint_categories(0, jJsonData)).appendTo(jJsonDiv);

  }

})();

当我在函数内部注释掉自引用时，我的类别树的顶层会按预期返回。我在Chrome控制台中收到的唯一错误消息是“错误”以及操作所占用的堆栈（此处无用，因为此脚本只执行了一项操作）。

同样，我的怀疑目前正围绕着函数中的变量范围，这可能是也可能不是原因。任何想法都将非常感谢！

Answer 1

您进行无限递归，因为在进行递归调用时，您传递了错误的parentId值。它应该是key_i，而不是val_i.Parent，因为后者与此次调用中的parentId相同。

function jint_categories(parentId, categoryData) {
    var jObjUL = $('<ul />');
    $.each(categoryData.Categories, function (key_i, val_i) {
        if (parseInt(val_i.Parent) == parseInt(parentId)) {
            var jObjLI = $('<li class="category" />').appendTo(jObjUL);
            var jObjDiv = $('<div class="controls" />').appendTo(jObjLI);
            $('<a href="#" class="view">&nbsp;</a>').appendTo(jObjDiv);
            $('<a href="" class="edit">' + val_i.Name + '</a>').appendTo(jObjDiv);
            jint_categories(key_i, categoryData).appendTo(jObjLI);
        }
    });
    return jObjUL;
}

DEMO

迭代函数使用jQuery嵌套

1 个答案: