JQuery get the height of the first three li tags

Question

I fill the unordered list with dynamic content, and the list height will match the content. Does anyone know how I can get the height of the first three li tags in an unordered list?

The generated dynamic content may be something like below, so I just want 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 gives you the full height ... but you can just simply put the code you want inside the function to do something in each element of the list.

 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 the var value to minus 1 element ...

 var liTotalHeight = -24; 

Then for each element we add the height li ..

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

Then I set ul scrollTop ...

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

A bit hacky but works best for me

Answer 4

 $('li').height(); // First $('li').next().height(); // Second $('li').next().next().height(); // Third 

Or use outerHeight if you want to include padding / margins.