Equal heights

by halirgb

HTML

<div class="eq-2">dfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsd</div>
<div class="eq-2">dfsdfsdf</div>
<div class="eq-2">dfsdfsdf</div>
<div class="eq-2">dfsdfsdf</div>
<!-- -->
<div class="eq-3">fsdffsdffsdffsdffsdffsdffsdffsdf</div>
<div class="eq-3">fsdf</div>
<div class="eq-3">fsdf</div>
<div class="eq-3">fsdf</div>
<!--  -->
<div class="eq-4">fsdffsdffsdffsdffsdffsdf</div>
<div class="eq-4">fsdf</div>
<div class="eq-4">fsdf</div>

CSS

div[class^='eq-'] {
    width:100px;
    float:left;
    word-wrap:break-word;
    padding:10px;
    margin:10px;
}
.eq-3 {
    background-color:blue;
}
.eq-2 {
    background-color:red;
}
.eq-4 {
    background-color:green;
}

JavaScript

$.fn.test = function () {
    //get elements
    var elements = [];
    $(this).each(function () {
        elements.push(this)
    });

    var max_height = {}, $div, number = 0;
    $(elements).each(function (index, value) {
        $div = $(value);
        number = $div.attr('class').match(/\d+/)[0]; // get number from the class name; (regular expression)
        if (typeof max_height[number] == 'undefined') max_height[number] = $div.height();
        else max_height[number] = Math.max($div.height(), max_height[number]);
    });

    //console.log('max height is:', max_height);
    $(elements).each(function (index, value) {
        $div = $(value);
        number = $div.attr('class').match(/\d+/)[0]; // get number from the class name;
        $div.height(max_height[number]);
    });

};

$("div[class^='eq-']").test();