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

Question

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

"container"class或id（如下图）显示从上到下的flexbox内容（"box"），到达底部时向右再排一行重新开始。
这是一个问题，因为正如我在旧主题中所解释的那样，Chrome 无法识别 flexbox 内容并且不会拉伸宽度。
迈克尔 P 通过一些脚本解决了这个问题，但脚本是为一个 "container" class 制作的（当多个 div 具有相同的 class 名称时，它会吓坏，因为它们有里面有不同数量的 "box" classes，所以宽度不同）。

我想达到的目标：
一个脚本（可以从 Michael-P 脚本修改）只关注它所在的 div，并在 div 停止时停止，因此不需要指定某个 class 名字。
这样做不会限制有多少 div 副本可以具有相同的 class 名称但其中包含不同数量的 "box" 内容。
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 更改为 class，然后遍历每个容器 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);
})

Answer 2

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

首先我们必须将 id 更改为 class，因为我们将有多个容器。然后，我们将迭代每个容器，并计算 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

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

Script that change the width of multiple divs with the same class name

html

javascript

css

jquery

flexbox