Question

我正在使用equalHeightColumns.js来提供一个跨浏览器相等的高度，这个工作正常，直到我需要有两组相等的高度。

所以目前我有：

$(".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相同的高度只在同一行内。

问题是现在我需要更改标记并且没有要引用的行。是否可以使其像lightbox 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);

Answer 1

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

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/

Answer 2

你可以尝试：

$(".row").each(function(){
    $(this).find(".equalHeight[rel='group1']").equalHeightColumns();
    $(this).find(".equalHeight[rel='group2']").equalHeightColumns();
});

按rel属性组元素

2 个答案: