How to make javascript loop through few divs with the same class

Question

Here's what the problem looks like:

(Sorry about the language. It's Polish, if you're curious )

So basically I have a code based on bootstrap, it works pretty well, things look ok on different devices, but the amout of words differs in every header, so when I'm resizing the screen, the lines obviously break and header's height becomes larger, which makes the icon and the paragraph move down. And it doesn't look very nice. Happily, a very nice stranger from stackoverflow helped me overcome this. With code like this:

$(window).resize(function () {
    var heig1 = $(".pad1").height();
    var heig2 = $(".pad2").height();
    var heig3 = $(".pad3").height();
    var lrg = Math.max(heig1, heig2, heig3);
    if (lrg == heig1){
        $(".pad2,.pad3").height(lrg);
    }
    else if(lrg == heig2){
        $(".pad1,.pad3").height(lrg);
    }
    else{
        $(".pad1,.pad2").height(lrg);
    }
});

Which works fine, but only for one row and I've got 4 of them. Is there a way to make this code loop through every row and change every header's height? I've tried using .each but it didn't do anything. Maybe it was my fault though.

/* .wi class gives icons their color and size */

.wi {
    font-size:2em!important;
    color:#ffb300;
    width:62px;
    margin-right:5px;
}

.marg {
    margin-top:30px;
    margin-bottom:30px;
}

.works h3 {
    font-size:0.95em;
    color:rgb(52, 73, 94);
    vertical-align:middle;
    display: table-cell;
    width:inherit;
}

.text-icon {
    margin-top:15px;
    overflow:hidden;
}

p4 {
    color:rgb(136, 138, 140);
    text-transform:none;
    font-size:0.6em;
    font-weight:normal;
    display:inline-block;
    width:72%;
    vertical-align:top;
    padding-top:5px;
    max-width:474px;
}

.more {
    font-size:0.38em;
    float:right;
    margin-right:5px;
    margin-top:7px;
}

<div class="row">
    <div class="col-md-4 marg">
        <h3 class="pad1"> Instrukcja bezpieczeństwa pożarowego  <br> </h3>
        <div class="text-icon"> 
            <i class=" fa fa-fire-extinguisher wi" aria-hidden="true"> </i>
            <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p4>    
            <div class="more"> Czytaj więcej... </div>
        </div>
    </div>
    <div class="col-md-4 marg">
        <h3 class="pad2">Wnioski o dofinansowanie z ZUS </h3>
        <div class="text-icon">  
            <i class=" fa fa-dollar wi" aria-hidden="true"> </i> 
            <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>  
            <div class="more"> Czytaj więcej... </div>
        </div>
    </div>
    <div class="col-md-4 marg">
        <h3 class="pad3"> Dobór środków ochrony indywidualnej  <br> </h3>
        <div class="text-icon"> 
            <i class=" fa  fa-umbrella wi" aria-hidden="true"> </i> 
            <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>  
            <div class="more"> Czytaj więcej... </div> 
        </div>
    </div>
</div>
<!-- <i class> stands for an icon from fontawesome -->

Use `.each()`, -`$('.row').each(function(){...your code....})` — Shaunak D, Jul 10 '16 at 16:46
It doesn't do anything. Every header in the section gains height:62px — Jakub Małojło, Jul 10 '16 at 16:49
check this plunker http://plnkr.co/edit/Xu7kCbZjtq9nWsTi8FoW is this what you are trying to achieve? — Deep, Jul 10 '16 at 16:57
Wow, it works fine. Without all these console logs and alerts.. What are they there for? — Jakub Małojło, Jul 10 '16 at 17:07
The one that does not exist. But it works as long as it's styled well so yea, why not — Jakub Małojło, Jul 10 '16 at 17:15

score 2 · Answer 1 · edited May 23 '17 at 12:22

get rid of those funny 1, 2, 3 classes
you're missing to handle your elements height on ready
Make sure to use valid HTML elements, cause <p4> is not one

You could create a data-sameheight="h3" attribute you can assign to the desired parent, where h3 can be any selector you want to target.

Than this script is all you need:

function sameheight( $el ) {
  $el.css("height", "auto").height(Math.max.apply(null, $el.map(function(){
    return $(this).height();
  }).get()));
}
$("[data-sameheight]").each(function(){
  var $el = $(this).find($(this).data("sameheight"));
  $(window).on("load resize", function(){
    sameheight($el);
  });
  sameheight($el);
});

.row{margin: 0 auto;width:90%;}
.col-md-4{float:left;width:33.333%;}
h3{background: orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" data-sameheight="h3">
  <div class="col-md-4 marg">
    <h3> Instrukcja bezpieczeństwa pożarowego</h3>
  </div>
  <div class="col-md-4 marg">
    <h3>Wnioski o dofinansowanie z ZUS <br> lorem <br> ipsum</h3>
  </div>
  <div class="col-md-4 marg">
    <h3> Dobór środków ochrony indywidualnej</h3>
  </div>
</div>


<div class="row" data-sameheight="h3">
  <div class="col-md-4 marg">
    <h3> Instrukcja bezpieczeństwa pożarowego</h3>
  </div>
  <div class="col-md-4 marg">
    <h3> Dobór środków ochrony indywidualnej</h3>
  </div>
  <div class="col-md-4 marg">
    <h3>Wnioski o dofinansowanie z ZUS <br> lorem <br> ipsum <br> super <br> yey</h3>
  </div>
</div>

Explained:

// Make target elements the same height
function sameheight( $el ) {
  $el
    // temporarily set height to "auto"
    .css("height", "auto") 
    // find all heights and set all heights to the "max" one
    .height(Math.max.apply(null, $el.map(function(){
        return $(this).height();
    }).get()));
}
// Target all data-sameheight parent elements
$("[data-sameheight]").each(function() {

  // get the selector from the data attribute
  // and go find those elements
  var $el = $(this).find($(this).data("sameheight"));

  // Trigger our sameheight() function on load and resize...
  $(window).on("load resize", function(){
    sameheight($el);
  });

  // ...and when ready
  sameheight($el);
});

Who needs JS? If your target Browsers are newer versions you can take a look at
same height using Flex

Radioreve · Answer 2 · 2016-07-10T17:16:11.277

It is most likely because you do not target your elements, as the code that was provided to help you doesnt. So if you copy/pasted it inside a jQuery each loop, you ended up working always on the first row.

Try to do something like this

$('.row').each(function( i, row ){

     var $pad1 = $( row ).find(".pad1"),
         $pad2 = $( row ).find(".pad2"),
         $pad3 = $( row ).find(".pad3"),

         h1 = $pad1.height(),
         h2 = $pad2.height(),
         h3 = $pad3.height(),

         max_height = Math.max( h1, h2, h3 );

    if( max_height == h1 ){
       $pad2.add( $pad3 ).height( h1 );
    }
    if( max_height == h2 ){
       $pad1.add( $pad3 ).height( h2 );
    }
    if( max_height == h3 ){
       $pad1.add( $pad2 ).height( h3 );
    }

});

score 0 · Answer 3 · answered Jul 10 '16 at 17:20

User @Deep came out with code like this and it turned out to work perfectly

$(window).resize(function () {
        $(".working").each(function(){
         var heig1 = $(".pad1",$(this)).height();
         var heig2 = $(".pad2",$(this)).height();
         var heig3 = $(".pad3",$(this)).height();
         var lrg = Math.max(heig1, heig2, heig3);
         if(lrg == heig1){
             $(".pad2,.pad3",$(this)).height(lrg);
         }
         else if(lrg == heig2){
             $(".pad1,.pad3",$(this)).height(lrg);
         }
         else{
             $(".pad1,.pad2",$(this)).height(lrg);
         }
        });
   });

How to make javascript loop through few divs with the same class

3 Answers3