javascript jQuery 获取前 3 个 li 标签的高度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6138715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:37:52  来源:igfitidea点击:

jQuery get height of first 3 li tags

javascriptjqueryjcarousel

提问by JBoom

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?

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

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.

生成的动态内容可能如下所示,所以我只想能够计算前 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>

Thanks for any help J.

感谢您的帮助。

回答by John Strickler

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/

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

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

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

回答by Trevor

If you want to calculate them individually use the eq selector

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

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

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

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

回答by guideX

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

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

var liTotalHeight = -24;

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

然后,对于每个项目,我添加 li 的高度 ..

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

Then I set the ul's scrollTop ...

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

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

A little hacky, but works best for me

有点 hacky,但对我来说效果最好

回答by namuol

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

Or use outerHeightif you want to include padding/margin.

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