Question

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

“容器”类或ID（如下所示）显示从上到下的Flexbox内容（“box”），当到达底部时，右侧的另一行重新开始。
这是一个问题，因为正如我在旧主题中所解释的那样，Chrome无法识别弹性箱内容并且不会拉伸宽度迈克尔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 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更改为类，因为我们将拥有多个容器。然后，我们将迭代每个容器，并计算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

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

2 个答案: