每个都在数组

Question

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

多维对象数组。主阵列是＆＃34;数据＆＃34;对象看起来像：

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

下面的代码工作率为90％，因为它集成了嵌套数组内部的数据，称为＆＃34;屏幕＆＃34;。唯一的问题是当循环时，它将屏幕的所有子数组值合并为一个并附加到它找到的第一个#images div。

我想要的是屏幕附加到主$ .each中与其循环相关的#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');
  })


});

Answer 1

在上一条评论中，您问我如何将屏幕附加到正确的图片容器中，我解释说，因为您每次都追加 #result，所以可以使用此选择器

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

这样您就可以获得last-of-type类的columns元素。

您还可以执行以下操作

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>'
  );

});

现在首先创建场景html代码并将其附加到正确的位置。你也减少了DOM搜索次数，因此它的表现也更好。