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

Question

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

Answer 1

JS FIDDLE

Change the id of container to a class, and then just iterate over each container class. You'll also need to change the scope of your maxOffsetRight var then from global to only applying to each iteration of container.

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

The script I wrote for your previous question was designed for the case you presented, ie 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