如何用 JavaScript 动态将子元素按宽度拆分到多个父容器中-js教程-PHP中文网

本文介绍如何通过 JavaScript 动态计算按钮宽度，当子元素总宽超出容器限制时，自动将其拆分到多个 .parent 容器中，实现多行布局并保留 ::before/::after 装饰效果。

本文介绍如何通过 javascript 动态计算按钮宽度，当子元素总宽超出容器限制时，自动将其拆分到多个 `.parent` 容器中，实现多行布局并保留 `::before`/`::after` 装饰效果。

在响应式按钮组设计中，有时 CSS 的 flex-wrap: wrap 无法满足特定视觉需求——例如每个“行”需独立拥有左右延伸的 ::before 和 ::after 阴影装饰块（如题图所示）。此时，单纯依赖 CSS 换行会导致伪元素作用范围错乱。解决方案是用 JavaScript 主动拆分 DOM 结构：将原始所有 .child 元素按宽度阈值分组，分别注入独立的 .parent 容器中。

以下是推荐的稳健实现逻辑（已修复原代码中的关键缺陷）：

function splitChildrenByWidth() {
  const wrapper = document.querySelector('.wrapper');
  if (!wrapper) return;

  const containerWidth = wrapper.offsetWidth;
  const children = Array.from(document.querySelectorAll('.child'));

  // Step 1: 获取每个子元素的渲染宽度（含 padding、gap 影响需预估）
  const items = children.map(el => ({
    element: el,
    width: el.offsetWidth + 24 // +24px 模拟 gap: 24px 的右侧间距（首尾除外，后续处理）
  }));

  // Step 2: 贪心分组 —— 逐个累加，超限时新建 parent
  let currentSum = 0;
  let currentParent = null;

  items.forEach((item, index) => {
    // 若当前无 parent，或加入后会溢出，则创建新 parent
    if (!currentParent || currentSum + item.width > containerWidth) {
      currentParent = document.createElement('div');
      currentParent.classList.add('parent');
      wrapper.appendChild(currentParent);
      currentSum = 0;
    }

    // 将元素移入当前 parent（注意：移除前先保存引用，避免 NodeList 动态变化干扰）
    currentParent.appendChild(item.element);
    currentSum += item.width;

    // 补充：若非末尾项，再加一个 gap（模拟 flex-gap 效果）
    if (index  {
  setTimeout(splitChildrenByWidth, 100);
});

✅ 关键优化说明：