jQuery get height of first 3 li tags

Jammer picture Jammer · May 26, 2011 · Viewed 19.2k times · Source

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

John Strickler picture John Strickler · May 26, 2011

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)')