Javascript 按rel属性对元素进行分组

我使用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>

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);

/*！
*equalHeightColumns.js 1.0
*
*版权所有2013，Paul Sprangershttp://paulsprangers.com
*根据WTFPL许可证发布
* http://www.wtfpl.net
*
*日期：2013年2月21日星期四20:11:00+0100
*/
（函数（$）{
$.fn.equalHeightColumns=函数（选项）{
默认值={
minWidth:-1，//除非窗口宽度大于此值，否则不会调整大小
maxWidth:99999，//除非窗口小于此值，否则不会调整大小
setHeightOn:'最小高度'，//设置等高的CSS属性。通常为高度或最小高度
heightMethod:'外高度'，//高度计算方法：高度、内高度或外高度
延迟：错误，
延迟计数：100
};
var$this=$（this）；//存储对象
options=$.extend（{}，默认值，options）；//合并选项
//重新计算到图元顶部的距离以使其居中
var resizeHeight=函数（）{
//获取窗口宽度
var windowWidth=$（window.width（）；
//检查当前浏览器宽度是否在设置的minWidth和maxWidth范围内
if（options.minWidthwindowWidth）{
var高度=0；
var最高=0；
//重置高度
$this.css（options.setHeightOn，0）；
//找出最高的元素
$this.each（函数（）{
height=$（this）[options.heightMethod]（）；
如果（高度>最高）{
最高=高度；
}
} );
//在元素上设置该高度
$this.css（options.setHeightOn，最高）；
}否则{
//添加检查，这样就不必每次都这样
$this.css（options.setHeightOn，0）；
}
};
//调用一次以设置初始值
如果（选项。延迟）{
setTimeout（resizeHeight，options.delayCount）；
}否则{
调整高度（）；
}
//调用resize。默认情况下，Opera会取消调整其大小。
$（窗口）。调整大小（调整高度）；
};
})（jQuery）；

您可以尝试：

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

---

如果需要自动脚本，则需要执行如下递归函数：

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();
})

---

小提琴：

Psst。。您需要再次检查您的报价：）不，我绝对不想手动声明它们，而且我需要删除行。代码笔-请不要这样滥用rel。

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();
})