Question

我是jQuery的新手，并将javascript与jQuery混合。

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

（数据有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搜索元素。

您的连接中不需要+ ''。我一直在新手代码中看到这一点，我从未理解为什么会这样做。

Answer 2

试试这个：

var arr = data;
for (var i in arr) {
  var current = arr[i];
  jQuery.each(current, function (j, 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: " + current[j];
     c++;
  });
}

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

2 个答案: