jQuery get height of first 3 li tags

Question

I am filling a unordered list with dynamic content and the list height will fir the content, does anyone know how I can get the height of the first 3 li tags in the unordered list?

The dynamic content produced might be something like below so I just want to be able to calculate the height of the first 3 li tags.

<ul>
<li>23 Feb 2011<br />Synergy Launch new website...<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida lacus a ligula dictum dignissim....</li>
<li>23 Feb 2011<br />Expat children "receive improv...<br />Expat children enjoy a better standard of education whilst living abroad compared to their home country according to the HSBC Offshore Offspring Report,...</li>
<li>25 Feb 2011<br />London Market favours Landlord...<br />The lettings market has swung dramatically in favour of landlords as an average six applicants chase every available property in London. This is a dramatic rise...</li>
<li>23 Feb 2011<br />Synergy Launch new website...<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida lacus a ligula dictum dignissim....</li>
</ul>

Thanks for any help J.

Answer 1

This provides you with all of their height... but you could easily just put the code you want inside the function to perform something on each list item.

var sum = 0;

$('li:lt(3)').each(function() {
   sum += $(this).height();
});

http://jsfiddle.net/rnpAE/1/

EDIT: Shortened$('li').nextUntil(':eq(2)') to $('li:lt(3)')

Answer 2

If you want to calculate them individually use the eq selector

http://api.jquery.com/eq-selector/

var liHeight = $('li:eq(0)').outerHeight(); // Obtains height of first li

Answer 3

First I set a var to be minus 1 item...

var liTotalHeight = -24;

Then, for each item, I add the height of the li ..

liTotalHeight = liTotalHeight + $(this).outerHeight();

Then I set the ul's scrollTop ...

$(this).parent().scrollTop(liTotalHeight);

A little hacky, but works best for me