未捕获的RangeError;超出最大调用堆栈大小

Question

我正在尝试列出来自JSON源的数据。

我将数据循环到$.each中，并使用append显示它。

var result = JSON.parse(response);

if(result.count != 0) {
    $(".modal").find("#search-results").html("<p>" + result.count + " result(s) found:</p>");
    var list = $(".modal").find("#search-results").append("<div class=\"list-group dbsearch-list-group\"></div>").find('div');
    $.each(result.results, function(index, value) {
        var link = list.append('<a href="javascript:;" class="list-group-item p-0 list-group-item-action" id="autosearch" data-id="' + value.itemid + '" data-instantclose="true"></a>').find('a');
        var col = link.append('<div class="row"></div>').find('div');
            col.append('<div class="col-sm py-0 col-md-auto"><img src="' + value.icon + '" class="dbsearch-icon" /></div>');
            col.append('<div class="col-sm py-0 align-self-center">' + value.title + '</div>');
    });
} else {
    $(".modal").find("#search-results").html("<p>No results found.</p>");
}

由于一些奇怪的原因，它在几个循环后输出错误：

jquery-3.3.1.min.js：2未捕获RangeError：超出最大调用堆栈大小

我用Google搜索了错误，他们说这是由无限循环引起的。 JSON响应条目可能很长，大约300个项目。

即便如此，如果我是正确的，也不应该真的输出这个。为什么会这样？

Answer 1

我不认为你的形式的链式功能：

x = y.append("some HTML element").find("type of that element");

正在做你期望的事情。我想你正在尝试将x设置为刚刚附加的元素。但它实际上将其设置为到目前为止已附加的所有元素的集合。当y是这些集合中的一个时，你将新的HTML附加到所有集合中，然后找到所有已经附加的元素。这导致正在创建和附加的元素数量呈指数级增长。

我认为你想要的是：

x = $("some HTML element").appendTo(y);

所以完整的代码应该是：

var result = JSON.parse(response);

if(result.count != 0) {
    $(".modal").find("#search-results").html("<p>" + result.count + " result(s) found:</p>");
    var list = $("<div class=\"list-group dbsearch-list-group\"></div>").appendTo(".modal");
    $.each(result.results, function(index, value) {
        var link = $('<a href="javascript:;" class="list-group-item p-0 list-group-item-action" id="autosearch" data-id="' + value.itemid + '" data-instantclose="true"></a>').appendTo(list);
        var col = $('<div class="row"></div>').appendTo(link);
        col.append('<div class="col-sm py-0 col-md-auto"><img src="' + value.icon + '" class="dbsearch-icon" /></div>');
        col.append('<div class="col-sm py-0 align-self-center">' + value.title + '</div>');
    });
} else {
    $(".modal").find("#search-results").html("<p>No results found.</p>");
}