0

我正在使用 equalHeightColumns.js 提供一个跨浏览器等高，在我需要 2 组等高之前它工作正常。

所以目前我有：

$(".row").each(function(){
    $(this).find(".equalHeight").equalHeightColumns();
});

<div class="row">
     <section class="equalHeight"></section>
     <section class="equalHeight"></section>
</div>
<div class="row">
     <section class="equalHeight"></section>
     <section class="equalHeight"></section>
</div>

如您所见，我不希望具有 equalHeight 的所有内容仅在同一行内具有相同的高度。

问题是现在我需要更改标记并且没有要引用的行。是否可以使这项工作像灯箱rel='group2'插件一样工作，以便我可以通过属性对 equalHeight 元素进行分组。

例如：这将是

<section class="equalHeight" rel="group1"></section>
<section class="equalHeight" rel="group1"></section>

<section class="equalHeight" rel="group2"></section>
<section class="equalHeight" rel="group2"></section>

equalHeightColumns.js

/*!
* equalHeightColumns.js 1.0
*
* Copyright 2013, Paul Sprangers http://paulsprangers.com
* Released under the WTFPL license
* http://www.wtfpl.net
*
* Date: Thu Feb 21 20:11:00 2013 +0100
*/
(function($) {
    $.fn.equalHeightColumns = function(options) {
        defaults = {
            minWidth: -1,               // Won't resize unless window is wider than this value
            maxWidth: 99999,            // Won't resize unless window is narrower than this value
            setHeightOn: 'min-height',  // The CSS attribute on which the equal height is set. Usually height or min-height
            heightMethod: 'outerHeight',// Height calculation method: height, innerHeight or outerHeight
            delay: false,
            delayCount: 100
        };
        var $this   = $(this); // store the object
        options     = $.extend({}, defaults, options); // merge options

        // Recalculate the distance to the top of the element to keep it centered
        var resizeHeight = function(){

            // Get window width
            var windowWidth = $(window).width();

            // Check to see if the current browser width falls within the set minWidth and maxWidth
            if(options.minWidth < windowWidth  &&  options.maxWidth > windowWidth){
                var height = 0;
                var highest = 0;

                // Reset heights
                $this.css( options.setHeightOn, 0 );

                // Figure out the highest element
                $this.each( function(){
                    height = $(this)[options.heightMethod]();
                    if( height > highest ){
                        highest = height;
                    }
                } );

                // Set that height on the element
                $this.css( options.setHeightOn, highest );
            } else {
                // Add check so this doesn't have to happen everytime
                $this.css( options.setHeightOn, 0 );
            }
        };

        // Call once to set initially
        if (options.delay){
            setTimeout(resizeHeight, options.delayCount); 
        } else {
            resizeHeight();
        }

        // Call on resize. Opera debounces their resize by default.
        $(window).resize(resizeHeight);
    };

})(jQuery);
4

2 回答 2

2

如果你想要一个自动脚本，你需要做一个这样的递归函数：

var $all = $('.equalHeight'),
    arrEqualH = [];

recursiveFilter()

function recursiveFilter(){
    var attr = $all.first().attr('rel');
    arrEqualH.push($('[rel='+attr+']'));
    $all = $all.not('[rel='+attr+']');

    if($all.length) recursiveFilter()
}

$.each(arrEqualH, function(){
    this.equalHeightColumns();
})

小提琴：http: //jsfiddle.net/2w9tq/

于 2013-09-17T14:57:52.347 回答
0

你可以试试：

$(".row").each(function(){
    $(this).find(".equalHeight[rel='group1']").equalHeightColumns();
    $(this).find(".equalHeight[rel='group2']").equalHeightColumns();
});
于 2013-09-17T14:26:55.877 回答