Bootstrap 3 Column of equal height with jQuery help with js required

Question

I used this bit ( jQuery equal height dynamic div lines) jQuery for equal heights, and it works very well, but with BS2 and BS3, if the same template is used, it does not scan the line to make it equal height, it scans the page itself. and then all the templates (line> col--) on one page get the height of the highest on the page. This is not a desired implementation.

http://jsbin.com/aVavuLeW/14/

In the above example, JSBin has an example of working with BS3 columns (a copy of it). You cannot have a relative position in the columns at the stacking point, so they were copied for this basket. As you can see, if you create a different class on each row (.foo and .foo2 in this example) and then the columns behave, but if you decide to use the same template, the height of the highest on the page will take more.

Question: How to fix the problem when using the same template that it calculates based on the page, not the string?

Thanks!!!

Answer 1

, , div, , . foo, . , , , , divs div.row, reset . , . http://jsbin.com/uBeQERiJ/1

$.fn.eqHeights = function(options) {

    var defaults = {  
        child: false ,
      parentSelector:null
    };  
    var options = $.extend(defaults, options); 

    var el = $(this);
    if (el.length > 0 && !el.data('eqHeights')) {
        $(window).bind('resize.eqHeights', function() {
            el.eqHeights();
        });
        el.data('eqHeights', true);
    }

    if( options.child && options.child.length > 0 ){
        var elmtns = $(options.child, this);
    } else {
        var elmtns = $(this).children();
    }

    var prevTop = 0;
    var max_height = 0;
    var elements = [];
    var parentEl;
    elmtns.height('auto').each(function() {

      if(options.parentSelector && parentEl !== $(this).parents(options.parentSelector).get(0)){
        $(elements).height(max_height);
        max_height = 0;
        prevTop = 0;
        elements=[];
        parentEl = $(this).parents(options.parentSelector).get(0);
      }

        var thisTop = this.offsetTop;

        if (prevTop > 0 && prevTop != thisTop) {
            $(elements).height(max_height);
            max_height = $(this).height();
            elements = [];
        }
        max_height = Math.max(max_height, $(this).height());

        prevTop = this.offsetTop;
        elements.push(this);
    });

    $(elements).height(max_height);
};

// run on load so it gets the size:
// can't have the same pattern for some reason or it scans the page and makes all the same height. Each row should be separate but it doesn't work that way.
$(window).load(function() {

//$('[class*="eq-"]').eqHeights();
  $('.foo [class*="eq-"]').eqHeights({parentSelector:'.foo'});
/*$('.foo2 [class*="eq-"]').eqHeights();*/

  });