4

私は同じ高さのためにjQueryのこのビット（jQuery equal height Respond div rows）を使用してきましたが、非常にうまく機能しますが、BS2とBS3で同じパターンが使用されている場合、行をスキャンして同じ高さにしません、ページ自体をスキャンし、同じページのすべてのパターン (row > col- )がページで最も高い高さを取得します。それは望ましい実装ではありません。

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

上記の JSBin には、BS3 列 (そのコピー) で動作する例があります。スタッキング ポイントで列の相対位置を設定することはできないため、これらはこのビンの目的でコピーされています。ご覧のとおり、各行 (この例では .foo と .foo2) に異なるクラスを作成すると、列は動作しますが、同じパターンを使用することにした場合、ページで最も高い高さが引き継がれます。

質問: 同じパターンを使用すると、行ではなくページに基づいて計算されるという問題を解決するにはどうすればよいですか?

ありがとう！！！

4

1 に答える 1

6

最も高い div に基づいて各行の高さを同じにする必要があることを正しく理解していれば、各行には同じクラス名の値があります。たとえばfoo、次のコードはそれを行います。アイデアは、サイズ変更された要素の親をチェックし、親が変更された場合、つまり 2 番目の div のサイズを変更するときに、変更div.rowを適用して最大高さの値をリセットすることです。指定された親に対して機能するために、親セレクターを指定するためのパラメーターが導入されました。 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();*/

  });
于 2013-11-28T19:05:38.950 に答える