我是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结果:
答案 0 :(得分: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搜索元素。
您的连接中不需要+ ''
。我一直在新手代码中看到这一点,我从未理解为什么会这样做。
答案 1 :(得分:0)
试试这个:
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++;
});
}