使用jQuery测量最高UL标签

时间:2010-01-20 14:27:49

标签: jquery height

我试图测量并获取最高的ul标签。

标记非常简单。

<ul class="ul_class">
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
</ul>

<ul class="ul_class">
   <li>a</li>
   <li>b</li>
   <li>c</li>
   <li>d</li>  
   <li>e</li>
</ul>


<ul class="ul_class">
   <li>a1</li>
   <li>b1</li>
   <li>c1</li>
   <li>d1</li>  
   <li>e1</li>
   <li>f1</li>
</ul>

所以我把ul显示为块。显然最高的是那个带有mosl li标签的那个,但我怎么能把这个高度变成变量呢?

提前感谢您的帮助

2 个答案:

答案 0 :(得分:3)

你可以在每一个上使用$('selector')。height()并找到最高的

http://docs.jquery.com/CSS/height

类似

var max = 0;
$('.ul_class').each(function(){
   var h = $(this).height();
   if(h > max)
        max = h;
});

// max is the max here.

答案 1 :(得分:0)

我同意John Boker的观点,你会想要使用height()而不是一些计算li s数的方法。这样做的原因是,根据li的内容,如果它是文本段落,则它可以有一个li但是长于列表项非常短的2 li列表。

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet lacinia augue, a dignissim orci sagittis nec. Fusce blandit commodo felis, et aliquam orci auctor id. Vestibulum sagittis felis non urna condimentum gravida. Duis quam erat, facilisis nec rutrum sed, hendrerit non leo. Nam varius nunc eget dolor dictum sagittis rutrum sem rhoncus.</li>
</ul>
          
  • Lorem ipsum dolor sit amet,consectetur adipiscing elit。 Nulla laoreet lacinia augue,一种dignissim orci sagittis nec。 Fusce blandit commodo felis,et aliquam orci auctor id。 Vestibulum sagittis felis non urna condimentum gravida。 Duis quam erat,facilisis nec rutrum sed,hendrerit non leo。 Nam varius nunc eget dolor dictum sagittis rut​​rum sem rhoncus。
<ul>
<li>Short</li>
<li>Short 2</li>
</ul>
  • Short 2

假设ul没有浮动或隐藏,John Boker的方法将起作用。如果是这种情况,你将不得不等待隐藏或浮动它们直到它们的高度被测量。