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

Question

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

“container”类或 id(如下所示)显示从上到下的 flexbox 内容(“box”)，当到达底部时向右再排一行 en 重新开始。
这是一个问题，因为正如我在旧主题中所解释的那样，Chrome 无法识别 flexbox 内容并且不会拉伸(stretch)宽度。
然而，迈克尔 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

将container的id改成class，然后遍历每一个container class。您还需要将 maxOffsetRight var 的范围从全局更改为仅适用于容器的每次迭代。

$('.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);
})