更改具有相同类名的多个 div 的宽度的脚本

Question

在得到了 @michael-p 的帮助后，他制作了一个出色的脚本， 我正在寻找一些可以在我的新情况下更好地工作的代码(old topic link)。

“容器”类或 id（如下所示）显示从上到下移动的 flexbox 内容（“框”），当到达底部时，会在右侧重新显示另一行。
这是一个问题，因为正如我在旧主题中所解释的那样，Chrome 无法识别 flexbox 内容并且不会拉伸宽度。
Michael P 通过一些脚本解决了这个问题，但是脚本是为一个“容器”类制作的（当多个 div 具有相同的类名时，它会吓坏，因为它们里面有不同数量的“盒子”类，所以宽度不同）。

我想要达到的目标：
一个脚本（可以从 Michael-P 脚本修改）只关注其放置的 div，并在 div 停止时停止，因此无需按名称指定某个类。
这样做不会限制有多少个 div 副本具有相同的类名但其中的“框”内容数量不同。
Fiddle from Michael P

<div id="container">  
    <div class="box">1</div>  
    <div class="box">2</div>  
    <div class="box">3</div>  
    <div class="box">4</div>  
    <div class="box">5</div>  
    <div class="box">6</div>  
    <div class="box">7</div>  
    <div class="box">8</div>  
    <div class="box">9</div>  
    <div class="box">10</div>  
    <div class="box">11</div>  
    <div class="box">12</div>  
    <div class="box">13</div>  
    maybe here the script? that stops when </div> is shown?
</div>

脚本

// Find the biggest offset right
var maxOffsetRight = 0,
    currentOffsetRight;

$('#container').children().each(function(index) {
    currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
    maxOffsetRight = currentOffsetRight;
}
});

$('#container').css('width', maxOffsetRight);

Answer 1

JS FIDDLE

将容器的 id 更改为一个类，然后遍历每个容器类。您还需要将 maxOffsetRight 变量的范围从全局更改为仅应用于容器的每次迭代。

$('.container').each(function(){
    var maxOffsetRight = 0;
    var currentOffsetRight - 0;
    $(this).children().each(function(index) {
       currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
       if (currentOffsetRight > maxOffsetRight) {
           maxOffsetRight = currentOffsetRight;
       }
    });

    $(this).css('width', maxOffsetRight);
})

Answer 2

我为您上一个问题编写的脚本是为您提出的案例设计的，即使用一个 flexbox 容器。但它可以很容易地适应一整套 flexbox 容器。

首先，我们必须将 id 更改为一个类，因为我们将拥有多个容器。然后，我们将迭代每个容器，并计算 flexbox 项目的最大偏移量。因此，我们必须将变量初始化放在在容器上迭代的函数中。如下：

$('.container').each(function() {

    var maxOffsetRight = 0,
        currentOffsetRight;

    // Find the biggest offset right of all childs 
    $(this).children().each(function(index) {
        currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
        if (currentOffsetRight > maxOffsetRight) {
            maxOffsetRight = currentOffsetRight;
        }
    });

   // Set the width of the current container
   var offsetLeft = $(this).position().left;
   $(this).css('width', maxOffsetRight - offsetLeft);                     
});

注意，在设置宽度的时候，我们要减去容器的offsetLeft。应该在之前的版本中做到这一点，但没有注意到它，因为只有一个容器，而且他在左偏移 0 处。

Fiddle