来自服务器的数组在 ajax 成功回调函数中导致奇怪的追加行为？

Question

//FIRST ARRAY OF DATA FROM SERVER: arrayOne = A:1,B:2,C:3.
//SECOND ARRAY OF DATA FROM SERVER: arrayOne = A:4,B:5,C:6.

//ajax success call back:

function (data) {
    var i = data.arrayOne.length - 1;
    var Parent = $('<div>',{'class':'parent'}).appendTo('body');
    var A = $('<h1>',{'class':'columns a','text':data.arrayOne[i].A}).appendTo('.parent');
    var B = $('<h1>',{'class':'columns b','text':data.arrayOne[i].B}).appendTo('.parent');
    var C = $('<h1>',{'class':'columns c','text':data.arrayOne[i].C}).appendTo('.parent');
}

//FIRST CALLBACK RETURNS: "123" appended as expected
//SECOND CALLBACK RETURNS: "123456 456" appended (expected output = 123 456).

在两次回调之后，第一个回调的 "Parent" div 附加了“123456”，第二个回调的 "Parent" div 附加了“456” " 附加到它）。为什么会发生这种情况，如果我 console.log 而不是创建元素，则不会发生这种情况，因此它与正在创建的元素特别相关。

为清楚起见，Chrome 中的问题图片：http://oi57.tinypic.com/10ygfhx.jpg

（使用 Node.js 和 Express）。

Answer 1

执行第二个回调时，页面上有两个<div class="parent"></div>

您应该将 .appendTo('.parent'); 更改为 .appendTo(Parent); - 这样您将引用新创建的 div，而不是页面上的所有 .parent div .

来自服务器的数组在 ajax 成功回调函数中导致奇怪的追加行为？

Array from server causing strange append behaviour in ajax success callback function?

arrays

ajax

jquery

node.js

express