未捕获的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：超出了最大调用堆栈大小

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

即使那样，如果我是对的，它也不应该真正输出该信息。为什么会这样？

Answer 1

我不认为您使用以下形式的链接函数：

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

正在做您期望的事情。我认为您正在尝试将x设置为刚刚添加的元素。但实际上，它将其设置为迄今为止已附加的 all 元素的集合。当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>");
}