jquery - Bootstrap 3 等高列与 jQuery 需要 js 的帮助

Question

我一直在使用 jQuery 的这个位 ( jQuery equal height responsive div rows ) 来实现等高，它工作得很好，但是对于 BS2 和 BS3，如果使用相同的模式，它不会扫描行来使高度相等，它会扫描页面本身，然后同一页面上的所有图案 (row > col--) 都会获得页面上最高的图案的高度。这不是期望的实现。

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

上面的 JSBin 有一个使用 BS3 列的示例(它的副本)。您无法在堆叠点处获得列的相对位置，因此已出于此 Bin 的目的复制了这些位置。正如您所看到的，如果您在每一行上创建不同的类(本例中为 .foo 和 .foo2)，那么列就会表现出来，但如果您决定使用相同的模式，则页面上最高的高度将接管。

问题:如何解决使用相同模式时根据页面而不是行计算的问题？

谢谢!!!

Answer 1

如果我理解正确的话，您希望每行基于最高的 div 具有相同的高度，而每行具有相同的类名称值，例如foo 那么下面的代码就可以做到这一点。这个想法是检查调整大小的元素的父元素，以及父元素是否已更改，即调整第二个 div.row 的 div 大小时，然后应用更改并重置最大高度的值。为了适用于指定的父级选择器，引入了一个参数来指定父级选择器。 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();*/

  });