Margin bottom on each short children of children divs
<p>I have 3 <code>.items_row</code> divs, that each contains 4 <code>.item</code> and each <code>.item</code> contains an <code>.item_img</code>. I'm using the following script to find the tallest <code>.item_img</code> in each <code>.item</code> in each <code>.items_row</code>, and add a bottom margin to the shortest ones which is the tallest <code>.item_img</code> height minus the height of each shortest. </p>

<pre><code>$('.items_row').each(function(){
    var tallestimg = -1;
    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            tallestimg = $(this).height() &gt; tallestimg ? $(this).height() : tallestimg;
            if ($(this).height() &lt; tallestimg) {
                $(this).css({ 'margin-bottom': tallestimg - $(this).height() });
            }
        });
    });
});
</code></pre>

<p>The script works exactly as I want but in the case the tallest <code>.item_img</code> div is not in the first <code>.item</code> div the shortest divs before it don't get the <code>margin-bottom</code> at all. For example if the tallest <code>.item_img</code> div is in the second <code>.item</code> of an <code>.items_row</code>, the <code>.item_img</code> preceding it ignores the <code>margin-bottom</code>. Any ideas?</p>
