2

I am attempting to create a column height equalizer that works if it is the only instance on the page but if there is more than one instance the script appears to be ignoring the $(this) in the each(){function.

Here is the HTML:

    <div class="equalizer" data-cols="2">

        <div class="equalized ">Content</div>
        <div class="equalized ">Content</div>
        <div class="equalized ">Content</div>
        <div class="equalized ">Content</div>

    </div>

And the jQuery:

    $(".equalizer").each(function() { 
        var colClass = 'eq-col-'+$(this).data("cols");
        var height = parseInt($(this).css('height'));

        $(this).children().each(function() {
            $(this).css('height',height + 'px');
            $(this).addClass(colClass);
        });     
    });

This is the line that appears to be being ignore with more that one instance: var height = parseInt($(this).css('height'));It's purpose ids to get the height of the wrapper .equalizer for that instance which in turn is set as the height for each child equalized.

It appears that the script is acquiring the height from the tallest equalizer wrapper on the page and setting the height for all equalized children on the page equal to that height regardless of which wrapper it is in... I've been messing around with this for several hours and am at a loss... any assistance would be greatly appreciated.

petebolduc
  • 1,233
  • 1
  • 13
  • 20
  • so you are looping to `.equalizer` to get `.equalized`'s height, then apply it to `.equalized`'s children? – Jeric Cruz Oct 15 '16 at 04:50
  • I am calling each instance of `equalizer` then acquiring it's height for that instance and then applying it's height to each of it's children `equalized` – petebolduc Oct 15 '16 at 04:55
  • try to do console.log() if `$(this)` has a value and not returning null or anything. – Jeric Cruz Oct 15 '16 at 05:04
  • It looks like the the height of the equalized is multiplied by number of the children. $(equalizer).height is the height that includes heights of the all the children. in the next step you are setting that height to all the children. is this what you are trying to do? – Sreekanth Oct 15 '16 at 05:06
  • I tried to with two wrappers whose class is `equalizer` but in my case child `equalized`'s height is same as its parent `equalizer`. So, as per your code its working perfectly fine. Would you please explain me bit more ?? – Hardipsinh Jadeja Oct 15 '16 at 05:07
  • @Sreekanth `equalizer` has no height pre set... I am assuming it gets its height from the tallest child `equalized` so what I am trying to do is get its height and then set it to all of the children so they equalize out in height – petebolduc Oct 15 '16 at 05:19
  • Could you add CSS, or create fiddle? – sinisake Oct 15 '16 at 05:23
  • P.S. Your code is working fine, as it seems, in this test: https://jsfiddle.net/rptdnLzp/ Of course, since there is no pre set height, you should use height(), as mentioned in one answer. – sinisake Oct 15 '16 at 05:35
  • Just posted a demo solution as per your requirements. Hope that helps. – Sreekanth Oct 15 '16 at 05:36

3 Answers3

2

I see your problem. This what you could do.

$(".equalizer").each(function() {
  var colClass = 'eq-col-' + $(this).data("cols");
  //Get all the children height 
  var heights = $(this).children().map(function() {
    return $(this).height();
  });
  //extract max out of the children
  var height = Math.max.apply(Math, heights);

  $(this).children().each(function() {
    $(this).css('height', height + 'px');
    $(this).addClass(colClass);
  });
});
.equalized {
  border: 1px solid red;
}
.equalized {
  margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="equalizer " data-cols="2">

  <div class="equalized ">

    <div>Sample Content
    </div>
    <div>Sample Content
    </div>

  </div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>

</div>

<div class="equalizer" data-cols="2">

  <div class="equalized ">Content1</div>
  <div class="equalized ">Content3</div>


</div>
Sreekanth
  • 3,110
  • 10
  • 22
1

Jquery Each function also provides you the index and item so you can access the current item directly, without using this. Jquery Each Document

$(".equalizer").each(function(index,item) { 
        var colClass = 'eq-col-'+$(item).data("cols");
        //var height = parseInt($(item).css('height'));
          var height = $(item).height();
        $(item).children().each(function(i,child) {
           // $(child).css('height',height + 'px');
              $(child).height(height);
            $(child).addClass(colClass);
        });     
    });

Also why you parsing height, when you can assign it directly... Also i don't think you need to add +'px'

abhirathore2006
  • 3,317
  • 1
  • 25
  • 29
0

Alternatively, you could also do this without javascript. instead of setting the height programmatically, you could use display:table for container and the display:table-cell for children.

Here is the display documentation on MDN 

.equalized {
  border: 1px solid red;
  margin: 2px;
}
.equalizer {
  display: table;
}
.equalized {
  display: table-cell;
}
<div class="equalizer " data-cols="2">

  <div class="equalized ">

    <div>Sample Content
    </div>
    <div>Sample Content
    </div>

  </div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>

</div>

<div class="equalizer" data-cols="2">

  <div class="equalized ">Content1</div>
  <div class="equalized ">Content3</div>


</div>
Sreekanth
  • 3,110
  • 10
  • 22
  • Need to run jquery anyways to determine the number of columns in the equalizer `data-cols="2"` ... thanks for your response – petebolduc Oct 15 '16 at 06:08