如何使用jQuery遍历数组并通过模运算分组渲染DOM元素

Got it！这就帮你实现用jQuery把公司数组按每3个一组渲染成指定DOM结构的需求，思路和代码都给你理清楚👇

核心思路很简单：遍历数组时用**模运算（%）**判断元素位置，每到第1、4、7...个元素（对应数组索引i % 3 === 0）就新建一个.row容器，然后把后续3个元素逐个放进.col里，最后一次性把所有渲染好的内容追加到页面中。

完整实现代码 #

// 你的原始公司数组
var list = ["company1", "company2", "company3", "company4", "company5", "company6"];
// 临时容器：用来存放所有生成的row，减少DOM操作次数（频繁改DOM会拖慢页面）
var $tempContainer = $('<div></div>');
var $currentRow;

// 遍历数组
$.each(list, function(index, company) {
    // 每3个元素创建一个新row（索引从0开始，所以index%3===0时是每组的第一个元素）
    if (index % 3 === 0) {
        $currentRow = $('<div class="row"></div>');
        $tempContainer.append($currentRow);
    }
    // 创建col元素，同时把格式改成需求里的「Company X」样式
    var $col = $('<div class="col col-4">Company ' + (index + 1) + '</div>');
    $currentRow.append($col);
});

// 最后把所有渲染好的内容追加到页面目标容器（这里用body做示例，你可以换成自己的容器选择器）
$('body').append($tempContainer.html());

关键细节说明 #

• 用$tempContainer临时存所有row：避免每加一个row就操作一次DOM，一次性追加性能更好；
• 格式处理：直接用index + 1生成序号，比处理原字符串更稳妥，完美匹配你要的「Company 1」这种格式；
• 兼容非3的倍数数组：如果数组有7个元素，最后一个row会自动只放1个col，不用额外改代码。

最终生成的DOM结构 #

运行代码后，页面会生成你需要的结构：

<div class="row">
  <div class="col col-4">Company 1</div>
  <div class="col col-4">Company 2</div>
  <div class="col col-4">Company 3</div>
</div>
<div class="row">
  <div class="col col-4">Company 4</div>
  <div class="col col-4">Company 5</div>
  <div class="col col-4">Company 6</div>
</div>

内容的提问来源于stack exchange，提问作者The Old County