如何为未渲染的jQuery元素统一设置组内最大宽度？

需要为一组刚创建但尚未渲染的jQuery元素（集合变量名为elts）统一设置宽度，宽度取值为该组元素中的最大宽度。常规的CSS百分比宽度或固定值宽度方案无法满足需求。

尝试直接通过JavaScript获取宽度时，由于元素未渲染，获取的宽度始终为0，导致代码失效：

let max_width = 0;
elts.each(function() { max_width = Math.max(max_width, $(this).width()); });
console.log(`Maximum width: ${max_width}`);
elts.each(function() { $(this).width(max_width); } );  // << 失效，因为宽度为0px

使用setTimeout（即使设置延迟0ms）可以解决该问题——0ms延迟的回调会在当前渲染栈完成后执行，此时元素宽度已可获取：

setTimeout(function()
{
    elts = $('._common_cls');
    query_common_maximum_width_and_set_it_to_all(elts);
}, 500);  // << 500ms足够，实际0ms也可行

但该方案稳定性不足，希望通过元素渲染完成的事件回调（如elts.on('render', function() { ... })），或理想的CSS方案（如.common_cls { width: calc('max_known_width_in_group')px; }）实现需求。

一、纯CSS方案：利用布局特性自动匹配最大宽度 #

无需JavaScript计算，通过CSS布局特性让元素自动继承组内最大宽度：

• Grid布局实现：将元素的父容器设置为网格布局，让所有子元素共享同一列的宽度（由最宽元素撑开）：

.parent-container {
  display: grid;
  grid-template-columns: max-content;
}
.common_cls {
  grid-column: 1; /* 所有元素放入同一列，自动继承列的最大宽度 */
}

• Flex布局实现：父容器使用垂直flex布局，子元素宽度设为100%，继承父容器由最宽元素撑开的宽度：

.parent-container {
  display: inline-flex;
  flex-direction: column;
}
.common_cls {
  width: 100%; /* 继承父容器宽度，父容器由最宽子元素撑开 */
}

二、更可靠的JS方案：用requestAnimationFrame替代setTimeout #

requestAnimationFrame会在浏览器下一次重绘前执行回调，比setTimeout(..., 0)更贴合渲染时序，确保元素已完成渲染：

function setGroupMaxWidth(elts) {
  requestAnimationFrame(() => {
    let maxWidth = 0;
    // 可选用outerWidth()包含内边距和边框，根据需求调整
    elts.each(function() { maxWidth = Math.max(maxWidth, $(this).width()); });
    elts.width(maxWidth);
  });
}

// 创建元素后直接调用
setGroupMaxWidth(elts);

三、监听元素渲染完成：MutationObserver + ResizeObserver #

通过MutationObserver监听元素是否被添加到DOM，再用ResizeObserver检测元素尺寸是否有效，确保在渲染完成后执行宽度设置：

function waitForElementRender(elts, callback) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      const targetEl = elts[0];
      if (mutation.addedNodes.length && Array.from(mutation.addedNodes).includes(targetEl)) {
        // 元素已加入DOM，监听尺寸变化
        const resizeObserver = new ResizeObserver(() => {
          const width = $(targetEl).width();
          if (width > 0) {
            resizeObserver.disconnect();
            observer.disconnect();
            callback();
          }
        });
        resizeObserver.observe(targetEl);
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

// 使用示例
waitForElementRender(elts, () => {
  let maxWidth = 0;
  elts.each(function() { maxWidth = Math.max(maxWidth, $(this).width()); });
  elts.width(maxWidth);
});

四、自定义"render"事件回调 #

在元素被添加到DOM后手动触发自定义render事件，再监听该事件执行宽度设置：

// 创建元素并添加到DOM后触发事件
elts.appendTo('.parent-container');
elts.trigger('render');

// 监听自定义render事件
elts.on('render', function() {
  let maxWidth = 0;
  elts.each(function() { maxWidth = Math.max(maxWidth, $(this).width()); });
  elts.width(maxWidth);
});

内容的提问来源于stack exchange，提问作者Markus-Hermann