用相同的类名改变多个div的宽度的脚本 [英] Script that change the width of multiple divs with the same class name

问题描述

@ michael-p得到了一位非常出色的脚本的帮助后，
i正在寻找一些可以在我的新情况下更好地工作的代码

容器类或id（如下所示）显示弹性盒内容（box ），他们自上而下，到达底部时再次向右移动，重新开始。

这是一个问题，因为在我的旧主题中解释过，Chrome无法识别Flexbox内容并且不会拉伸宽度。

Michael P通过一些脚本解决了这个问题，但是脚本是为一个容器类制作的（当多个div具有相同的类名时，它就吓倒了，因为它们有不同的名称b
$ b

我想实现的功能：

一个脚本（可以修改为迈克尔 - P脚本），只关注其放置的div，并停止时div停止，所以不需要通过名称来指定某个类。

这样做不会限制多少个div副本可以具有相同的类名，而是具有不同数量的盒子的内容。

小提琴来自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> 
也许在这里脚本？停止< / div>显示？ 
< / div> 
  

脚本

  //找到最大的抵消权
 var maxOffsetRight = 0，
 currentOffsetRight; 
 $ b $（'＃container'）。children（）。each（function（index）{
 currentOffsetRight = $（this）.position（）。left + $（this）.outerWidth （true）; 
 if（currentOffsetRight> maxOffsetRight）{
 maxOffsetRight = currentOffsetRight; 
} 
}）; 
 
 $（'＃container'）。css（'width'，maxOffsetRight）; 
  

解决方案

您提交的案例，即使用一个Flexbox容器。但它可以很容易地适用于整套flexbox容器。

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

pre $ $'code $（'。container'）。each（function（）{

var maxOffsetRight = 0，
currentOffsetRight;

//查找所有子元素的最大偏移量权限
$（this）.children（）。each（function（index）{$ b （currentOffsetRight> maxOffsetRight）{
maxOffsetRight = currentOffsetRight;
}
$ b}）;

//设置当前容器的宽度
var offsetLeft = $（this）.position（）。left;
$（this） .css（'width'，maxOffsetRight - offsetLeft）;
}）;

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

小提琴

After gotten help from @michael-p who had made a script that works excellent, i was looking for some code that could work better in my new situation (old topic link).

The "container" class or id (as shown below) displays flexbox content ("box") who go from top to bottom and when reaching the bottom makes another row to the right en start over.
This was a issue because as explained in my old topic, Chrome doesn't recognize the flexbox content and does not stretch the width.
Michael P solved this however through some scripting but the script was made for one "container" class (it freaks out when multiple divs has the same class name, because they have different amount of "box" classes inside it, so different widths).

What i would like to achieve:
A script (can be modified from Michael-P script) that focuses only in the div that its placed in, and stops when the div stops, so there would be no need to specify a certain class by name.
Doing so there would be no limit of how many div copies there could be with the same class name but different amount of "box" contents in it.
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>

Script

// 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);

解决方案

The script I wrote for your previous question was designed for the case you presented, i.e. with one flexbox container. But it could be easily adapted for a whole set of flexbox containers.

First we will have to change the id to a class, because we will have more than one container. Then, we will iterate on each container, and compute the largest offset right of the flexbox items. Therefore we have to put the variable initialization inside a function iterated on the containers. As follows :

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

Note that when setting the width, we have to substract the offsetLeft of the container. Should have done that in the previous version, but didn't notice it as there was only one container, and he was at an offset left of 0.

Fiddle

这篇关于用相同的类名改变多个div的宽度的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！