jQuery 获取前 3 li 标签的高度

Question

我正在用动态内容填充一个无序列表，列表高度将显示内容，有谁知道我如何获得无序列表中前 3 个 li 标签的高度？

生成的动态内容可能如下所示，所以我只想能够计算前 3 个 li 标签的高度。

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

感谢您的任何帮助。

Answer 1

这为您提供了它们的所有高度......但您可以轻松地将所需的代码放入 function 中，以对每个列表项执行某些操作。

var sum = 0;

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

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

编辑：缩短$('li').nextUntil(':eq(2)')到$('li:lt(3)')

Answer 2

如果要单独计算它们，请使用 eq 选择器

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

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

Answer 3

首先，我将 var 设置为负 1 项...

var liTotalHeight = -24;

然后，对于每个项目，我添加 li 的高度。

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

然后我设置了ul的scrollTop ...

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

有点hacky，但最适合我

Answer 4

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

或者，如果您想包含填充/边距，请使用outerHeight 。