Javascript 如何将通过Ajax检索的数据正确地附加到DOM中？

我在数据库表中的一行中插入了几个带有json_encode的数组值，现在希望通过jquery将它们作为顺序进行回显

这是使用json_encode从我的PHP代码中输出的：

我的js代码是ajax调用$.ajax{…：

现在，通过上面的js代码，我有以下输出：

杰克你好，11号和1111号，你好，22号& 222222什么&33&3333，罚款&44&444 谢谢&55&55555好&66&666

jim fine&44&444谢谢&55&55555好&66&666

莎拉：谢谢，55和55555好，66和666 我想成为：

杰克你好，11号和1111号，你好，22号& 222222什么&33&3333333

吉姆·费恩&44&444

莎拉：谢谢，55和55555好，66和666

---

我该怎么办？

保留对tooltip元素的引用并将信息附加到其中：

var $li = $('<li><a href="" class="tool_tip" title="ok">' + value.name_r + '</a></li>');
var $tooltip = $('<div class="tooltip"></div>').appendTo($li);

var info = data[0].residence_u[index];

$.each(info.units, function (index, value) {
    $tooltip.append(value + ' & ' + info.extra[index] + ' & ' + info.price[index] + '<br>');
});

$li.appendTo('#residence_name');

为什么代码会产生这种结果

---

因为$'olresidence\u name li.tooltip'将选择住宅名称中每个li中的每个.tooltip元素，而不仅仅是当前创建的元素。

这是一个非常复杂的数据结构-我的第一反应是将其重新组织为一种不太容易让人动脑的格式！但是假设结构是固定的，一个非常清晰的迭代结构有助于消除混淆。我在下面提供了一些代码，这些代码不起任何作用，但确实提供了一个更易于理解的工作框架。在每个阶段，您需要的变量都被提取出来以备使用，如何处理数据由您决定。未经测试，但应该可以工作：

// Declare the variables we're going to use
var i, j; // Iterating variables
var name, unitsArray, extraArray, priceArray; // Outer loop
var unit, extra, price; // Inner loop

// Loop through the people
for( i in data[0].residence ) {

  // Assign the outer-loop variables
  name = data[0].residence[i].name_r;
  unitsArray = data[0].residence_u[i].units;
  extraArray = data[0].residence_u[i].extra;
  priceArray = data[0].residence_u[i].price;

  // Do something here with the name

  // For each person, loop through the things they said
  for( j in unitsArray ) {

    // Assign the inner-loop variables
    unit  = unitsArray[j];
    extra = extraArray[j];
    price = priceArray[j];

    // Do something here with the 3 inner-loop variables

  }

}

var $li = $('<li><a href="" class="tool_tip" title="ok">' + value.name_r + '</a></li>');
var $tooltip = $('<div class="tooltip"></div>').appendTo($li);

var info = data[0].residence_u[index];

$.each(info.units, function (index, value) {
    $tooltip.append(value + ' & ' + info.extra[index] + ' & ' + info.price[index] + '<br>');
});

$li.appendTo('#residence_name');

// Declare the variables we're going to use
var i, j; // Iterating variables
var name, unitsArray, extraArray, priceArray; // Outer loop
var unit, extra, price; // Inner loop

// Loop through the people
for( i in data[0].residence ) {

  // Assign the outer-loop variables
  name = data[0].residence[i].name_r;
  unitsArray = data[0].residence_u[i].units;
  extraArray = data[0].residence_u[i].extra;
  priceArray = data[0].residence_u[i].price;

  // Do something here with the name

  // For each person, loop through the things they said
  for( j in unitsArray ) {

    // Assign the inner-loop variables
    unit  = unitsArray[j];
    extra = extraArray[j];
    price = priceArray[j];

    // Do something here with the 3 inner-loop variables

  }

}