如何按行序遍历多col-md-4容器中的child元素？

你现在的问题是常规的按父容器逐个遍历子元素，导致顺序不符合预期——你需要的是先遍历所有父容器的第1个子元素，再遍历所有父容器的第2个子元素，以此类推，就像把三个col-md-4的父容器拼成一个col-md-12后按行取元素一样。

问题分析 #

你之前的jQuery代码是先遍历每个parent，再逐个遍历其内部的child，所以输出顺序是parent1的所有child → parent2的所有child → parent3的所有child，这和你要的“按子元素位置分组”的顺序完全不符。

解决方案 #

核心思路是：先确定所有父容器中子元素的最大数量，然后按子元素的索引（第1个、第2个...）循环，每次循环遍历所有父容器，取出对应索引的子元素（如果存在的话）。

方案一：jQuery实现

// 获取所有父容器
const $parents = $('.parent');
// 计算所有父容器中，子元素数量的最大值
const maxChildCount = Math.max(...$parents.map(function() {
  return $(this).children('.child').length;
}).get());

// 按子元素索引逐组遍历
for (let i = 0; i < maxChildCount; i++) {
  $parents.each(function() {
    // 取出当前父容器中第i个child（索引从0开始）
    const $child = $(this).children('.child').eq(i);
    // 确保该子元素存在再处理
    if ($child.length) {
      console.log($child.data('id'));
      // 这里添加你的业务逻辑，比如操作DOM、收集数据等
    }
  });
}

这段代码运行后，会输出你期望的顺序：3, 1, 11, 4, 2, 7, 8。

方案二：原生JavaScript实现（无需jQuery）

如果你的项目没有依赖jQuery，也可以用原生JS实现相同逻辑：

// 获取所有父容器
const parents = document.querySelectorAll('.parent');
// 计算子元素最大数量
const maxChildCount = Math.max(...Array.from(parents).map(parent => parent.querySelectorAll('.child').length));

// 按索引分组遍历
for (let i = 0; i < maxChildCount; i++) {
  parents.forEach(parent => {
    const child = parent.querySelectorAll('.child')[i];
    if (child) {
      console.log(child.dataset.id);
      // 业务逻辑处理
    }
  });
}

为什么这个方案可行？ #

这种方式完全贴合你的需求：

• 不管每个父容器的子元素数量是否一致（比如第一个父容器有3个child，其他只有2个），代码会自动处理，不会报错
• 严格按照“第n个child → 所有父容器的第n个child”的顺序遍历，完美匹配你要的效果

内容的提问来源于stack exchange，提问作者senty