在 html 模板上附加/前置 div 的 javascript 逻辑

Question

我编写了一个非常基本的网络应用程序，可以从 API 中提取食谱数据。数据通过被推送到 javascript 文件中定义的 html 模板来呈现。布局通过 CSS 中的 float 网格控制。

渲染结果并推送到模板的代码部分:

function displayRecipeSearchData(data) {
  var results = ' ';
  if (data.hits.length) {
    data.hits.forEach(function(item) {
      results += template.item(item);
    });
  }
  else {
    results += '<p> No results </p>';
  }
  $('#js-search-results').html(results);
}

显示响应的 html 模板:

const template = {
  item: function(item) {
    return '<div class ="col-4">' +
             '<div class ="result">' +
               '<div class="recipelabel">' +
                 '<div class="reclist">' + item.recipe.ingredientLines + '</div><!-- end reclist -->' +
                  '<p class="label">' + item.recipe.label + '</p>' +
                  '<div class="thumbnail">' + 
                    '<a href="'+ httpsTransform(item.recipe.url) + '" target="_blank">' +
                      '<img src="' + item.recipe.image + '"alt="' + item.recipe.label + '">' +
                    '</a>' +
                    '<div class="recipesource">' +
                      '<p class="source">' + item.recipe.source + '</p>' +
                    '</div><!-- end recipesource -->' +
                  '</div><!-- end thumbnail -->' +
                '</div><!-- end recipelabel -->' +
              '</div><!-- end result -->' + 
            '</div><!-- end col-4 -->';
  }
};

我正在尝试更改 displayRecipeSearchData 函数中的逻辑，以便对于每组三个结果，一个 <div></div>围绕三个结果的 block 。这样行/列总是在 flex 网格中工作。我尝试了几种方法，但还没有得到正确的语法/逻辑。嵌套在现有语句中的 if 语句是否有效？

if(i % 3 === 0 ){ results. += '<div class="row">''</div>'}

如有任何建议，我们将不胜感激。

Answer 1

您可以使用另一个变量来存储一行 HTML:

function displayRecipeSearchData(data) {
  var results = ' ', row = '';
  if (data.hits.length) {
    data.hits.forEach(function(item, i) {
      row += template.item(item);
      if (i % 3 == 2) { // wrap row and add to result
        results += '<div class="row">' + row + '</div>';
        row = '';
      }
    });
    if (row.length) { // flush remainder into a row
      results += '<div class="row">' + row + '</div>';
    }
  }
  else {
    results += '<p> No results </p>';
  }
  $('#js-search-results').html(results);
}