javascript - 使用 jqueryeach()，确保这个 html 表中的列数不超过 5 的最佳方法是什么？

Question

在 ajax 调用的回调中，我得到了一组人物对象及其图片的 URL。我有以下代码:

 html.push("<table class='tooltipProject'>");
 html.push("<tr><td>");

      $.each(data.People, function (index, person) {
         html.push("<img width='44' src='" + person.PicLink + "' />");
      });

 html.push("</td></tr>");
 html.push("</table>");
 return html.join("");

我正在获取此 html 并将其显示在弹出窗口中。这非常有效，因为每个数组 (data.People) 都很小。我现在遇到的情况是它们很大，因此用户界面看起来太宽。我可以将 UI 弹出窗口限制为固定宽度(假设为 500px)，但我现在需要生成一个表格，在该表格中我不想连续显示超过 5 个图像，之后它应该只到下一行

所以我在 data.People 中有 3 个项目，然后它将显示一行。

如果我在 data.People 中有 10 个项目，那么我想在第一行显示 5 个项目，在第 2 行显示 5 个项目。

我可以为每张图片创建一个 TD，但我不确定这会产生什么影响，因为我仍然需要正确的逻辑来知道何时需要新行。

Answer 1

只需将 $.each 循环的索引模 5 即可确定何时开始一行:

 html.push("<table class='tooltipProject'><tr>");

 $.each(data.People, function (index, person) {
     html.push("<td><img width='44' src='" + person.PicLink + "'></td>");
     if (index % 5 == 4 && index < data.People.length - 1) {
         html.push("</tr><tr>");
     }
 });

 html.push("</tr></table>");
 return html.join("");