Align tops of two columns of images

[skald89]

I want to compare two images side by side. I am trying to grab and store the heights of the first column, to apply the heights to the corresponding image in the other column.

Right now I can only get it to either get the first height or all of the height combined.

http://jsfiddle.net/F34Ex/

<div id="project">          

    <ul id="new">
        <li> <img src="#" />New 1 </li>
        <li> <img src="#" />New 2 </li>
        <li> <img src="#" />New 3 </li>
        <li> <img src="#" />New 4 </li>
        <li> <img src="#" />New 5 </li>
    </ul>


    <ul id="old">
        <li> <img src="#" />Old 1 </li>
        <li> <img src="#" />Old 2 </li>
        <li> <img src="#" />Old 3 </li>
        <li> <img src="#" />Old 4 </li>
    </ul>
 </div>

Jquery to collect heights of ('#new li') and to display the height after the image in ('#old li'). I know that I have to change .append() to .css('height', theHeight)

   $(function () {
    $('#new li').each(function() {
        theHeight = $(this).height();

            $('#old li').each(function() {
            $(this).append(theHeight + ' ');
        });
    });
});

[rtrethewey]

All I have is the kind of answer that nobody likes, but I'd be inclined to either set a fixed height on the <li> elements and a max-height on the <img>s with CSS, or change the HTML so that each matching <img> from both lists is displayed in a separate block-level element. Something like:

<div><img src="list1_1"><img src="list2_1"></div>
<div><img src="list1_2"><img src="list2_2"></div>
<div><img src="list1_3"><img src="list2_3"></div>
<div><img src="list1_4"><img src="list2_4"></div>
<div><img src="list1_5"><img src="list2_5"></div>

I'd just be concerned that using JavaScript to re-align the images after they've loaded is going to cause the display to jump as the code is processed.