javascript - jQuery 每个语句在 2 次循环后停止

Question

我是 jQuery 新手，并且将 javascript 与 jQuery 混合在一起。

单击 add_comment_bt 我向 ajax.php 发送一个 get 请求，并尝试使用each 语句循环数据:

(数据有 2 个数组，每个数组有 7 个条目，并且是多维的，您可以在下面看到数据)

c = 1;
$("#add_comment_bt").click(function () {
        $.get('ajax.php', function (data) {
            var arr = data;
            jQuery.each(arr, function (i, val) {
                var commentbox = document.createElement("div");
                commentbox.id = 'commentbox' + c + '';
                commentbox.className = 'comments';
                container.appendChild(commentbox);
                var commentBoxEach = document.getElementById('commentbox' + c + '');
                var div = document.createElement("div");
                div.id = 'comment' + c + '';
                commentBoxEach.appendChild(div);
                document.getElementById('comment' + c + '').innerHTML = "Comment: " + arr[0][i];
                c++;
            });
        }, "json");

在循环时，我创建两个 div 并将数据放入其中。前 2 个循环已创建并且工作完美，但其余结果未显示？为什么循环会停止？

谢谢

这是我的示例 JSON(我只放置了第一个数组):

[
    ["Green Apple", "Red Apple", "Green", "Apricot", "Banana", "Passionfruit", "Orange"],
    ["allen", "kate", "paul", "rose", "arnold", "ferry", "top"]
]

这是容器 div 的 HTML:

<div><div id="container"></div><div id="commentDraftDiv"></div></div>

这是 HTML 结果:

Answer 1

您正在循环外部数组，然后使用 i 索引第一个内部数组。由于外部数组只有 2 个元素，因此您只能获取内部数组的前两个元素。

如果您只想要第一个内部数组的元素，则应该对其进行循环。

var arr = data[0];
jQuery.each(arr, function (i, val) {
    var commentbox = document.createElement("div");
    commentbox.id = 'commentbox' + c;
    commentbox.className = 'comments';
    container.appendChild(commentbox);
    var div = document.createElement("div");
    div.id = 'comment' + c;
    div.innerHTML = "Comment: " + val;
    commentbox.appendChild(div);
    c++;
});

也没有必要

var commentBoxEach = document.getElementById('comment' + c);

这与您刚刚为 commentbox 中的元素提供的 ID 相同，因此您可以使用该变量，而不是通过 ID 搜索元素。

并且在连接中不需要 + '' 。我一直在新手代码中看到这一点，我从来不明白他们为什么这样做。