Javascript 每个数组中的每个数组都在一个append for数组中

我有一个数组，我正在迭代它并在一些HTML中显示它

多维对象的数组。主数组是“数据”，其对象如下所示：

我面临的问题是，我想循环第二个数组，并显示与正在循环的当前数组项相关的所有项

下面的代码可以工作90%，即集成在数据内部的嵌套数组上，该数组称为“屏幕”。唯一的问题是循环时，它将屏幕的所有子数组值整理成一个，并将其附加到找到的第一个#images div

我想让屏幕附加到与主$中的循环相关的#images div中

jQuery.each(data, function(i, val) {
  console.log(this);
  $('#result').append(
      '<div class="results__container large-12 columns ">' +
      '<div class="results__image large-2 columns">' +
      '<img src="//images.igdb.com/igdb/image/upload/t_' + size + '/' + val.packshot + '.jpg" />' +
      '</div> ' +
      '<div class="results__meta large-8 columns">' +
      "<div class='results--name'>" + val.name + "</div>" +
      "<div class='results--developer'>" + val.developer + "</div>" +
      "<div class='results--publisher'>" + val.publisher + "</div>" +
      "<div class='results--release'>" + val.release_date + "</div>" +
      "</div>" +
      "<div class='game-select large-1 columns end'><input class='squaredOne' type='checkbox' name='select_game'></div>" +
      '</div>'+
      '<div id="images-' + i + '" class="large-12">' +
      '</div>'
  );

  jQuery.each(val.screens, function(k, screen) {
      $('<div class="large-2 columns">' + screen + '</div>').appendTo('#images');
  })


});

jQuery.each（数据、函数（i、val）{
console.log（this）；
$（“#结果”）。追加(
'' +
'' +
'' +
' ' +
'' +
“”+val.name+“”+
“”+val.developer+“”+
“”+val.publisher+“”+
“”+val.release_日期+“”+
"" +
"" +
''+
'' +
''
);
jQuery.each（val.screens，function（k，screen）{
$（''+屏幕+''）。附加到（'#图像'）；
})
});

在您上次的评论中，您问我如何将屏幕附加到正确的图像容器中，我解释说，由于您每次都将附加到

#result

，因此您可以使用此选择器

$('<div class="large-2 columns">' + screen + '</div>').appendTo('#result > .columns:last-of-type > .images');

---

现在，首先创建场景html代码并将其附加到正确的位置。您还可以减少DOM搜索，因此性能也会更好。

在我看来就像所有的JS。如果有PHP，添加它和标签。你知道你在这里添加了多个具有相同ID的元素，对吗？更新（

'+

）并将该循环的数组键添加到idso中不是最佳做法，现在您只需

$（''+screen+''）.appendTo（'#images-'+i）（更新了我的评论，将
k
更改为
i
）啊，太完美了！出于好奇，如果图像是一个类而不是一个id，你会怎么做呢？
jQuery.each(data, function(i, val) {
  console.log(this);

  var html = '';
  jQuery.each(val.screens, function(k, screen) {
      html += '<div class="large-2 columns">' + screen + '</div>';
  });

  $('#result').append(
      '<div class="results__container large-12 columns ">' +
      '<div class="results__image large-2 columns">' +
      '<img src="//images.igdb.com/igdb/image/upload/t_' + size + '/' + val.packshot + '.jpg" />' +
      '</div> ' +
      '<div class="results__meta large-8 columns">' +
      "<div class='results--name'>" + val.name + "</div>" +
      "<div class='results--developer'>" + val.developer + "</div>" +
      "<div class='results--publisher'>" + val.publisher + "</div>" +
      "<div class='results--release'>" + val.release_date + "</div>" +
      "</div>" +
      "<div class='game-select large-1 columns end'><input class='squaredOne' type='checkbox' name='select_game'></div>" +
      '</div>'+
      '<div id="images-' + i + '" class="images large-12">' + html +
      '</div>'
  );

});