使用jQuery按当前页面DOM顺序遍历重排后的div不生效

问题根源 #

出现遍历顺序与页面实际显示顺序不一致的原因，通常来自两个常见实现逻辑的偏差：

• 多数div重排类插件（如瀑布流、可拖拽网格）实现视觉重排时，仅通过修改元素的绝对定位top/left坐标完成位置移动，并没有实际调整DOM树中节点的先后顺序。视觉上的位置变化，不代表DOM结构里的元素顺序发生了改变。
• $(".brick").each()逻辑中，jQuery收集元素集合时是按照浏览器初次解析HTML的初始文档顺序生成的，这个集合不会因为元素的视觉位置变化自动更新，因此遍历输出的永远是元素的初始排列顺序，和页面实际渲染的位置没有绑定关系。

可落地的解决方法 #

• 优先使用插件提供的排序结果接口
  主流重排插件都会在重排完成的事件回调中，直接返回当前按视觉顺序整理好的元素列表，无需自行编写遍历逻辑。优先查阅插件的重排完成回调文档，直接取回调参数里的排序结果，是性能和可靠性最高的实现方式。
• 针对仅改定位、不调整DOM结构的插件，手动按视觉坐标排序后遍历
  如果插件没有暴露内置的排序结果，你需要先把所有目标元素取出，按照页面上的真实视觉位置做自定义排序，再执行遍历：

// 从DOM取出所有目标元素，生成可排序的数组
const brickArray = Array.from(document.querySelectorAll(".brick"));
// 按从上到下、从左到右的视觉规则排序
brickArray.sort((elemA, elemB) => {
  const posA = elemA.getBoundingClientRect();
  const posB = elemB.getBoundingClientRect();
  // 垂直位置差小于行高阈值时，判定为同一行，按水平位置排序
  if (Math.abs(posA.top - posB.top) < 10) {
    return posA.left - posB.left;
  }
  // 不同行的元素按垂直位置从上到下排序
  return posA.top - posB.top;
});
// 排序完成后遍历，即可得到和页面显示完全一致的顺序
brickArray.forEach((domNode, index) => {
  const id = domNode.getAttribute("id");
  console.log(`${index}: ${id}`);
});

注意：排序时的垂直位置差阈值可以根据项目实际的行高灵活调整，避免同排元素因为排版误差被错判为不同行。

• 确认遍历逻辑的执行时机
  即便插件会在重排时真实调整DOM节点顺序，也要确保遍历代码是在重排操作完全结束的回调钩子中触发，不要在重排动作执行的中途、或者页面刚加载的阶段提前运行遍历逻辑，否则拿到的永远是操作前的旧顺序。

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