jquery在'ul'中查找'li'项目的数量并应用一些数学来计算'ul'的高度答案

【问题标题】：jquery find number of 'li' items in a 'ul' and apply some math to calculate height of 'ul'jquery在'ul'中查找'li'项目的数量并应用一些数学来计算'ul'的高度
【发布时间】：2011-04-16 10:57:45
【问题描述】：

Jquery/编程新手在这里。我正在尝试为ul 动态分配高度以强制滚动。我的方法是检测列表中有多少项目，然后应用一些数学计算我的 ul 的高度（我尝试过 height()；但它没有给出正确的数字；ul 是缩略图网格，内联显示，连续显示三个项目，所以我想我必须计算这个高度）。图片为 75 像素正方形，图片之间有 10 像素的边距。

我想出了这个，但它不起作用：

var numitems =  $("#my_grid li").size();

var numrows = ( numitems / 3 );

var myheight = ((numrows * 75) + [(numrows -1 ) * 10]);

$("ul#my_grid").height(myheight);

谢谢！

【问题讨论】：

你能假设所有li 元素都具有相同的高度吗？
是的，它们的高度都是 75px
你确定 myheight 确实包含一个值，也可以尝试使用api.jquery.com/css

标签： javascript jquery math size height

【解决方案1】：

最好的办法：

<!doctype html>
<head><title></title></head>
<style type="text/css">
ul {
  width: 300px;
  }
  li {
    width: 75px;
margin: 10px;
    display: inline-block;
  }
</style>
<body>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
</html>

解决方案是使用 inline-block 并让浏览器为 ul 确定合适的高度。如果由于需要对旧版浏览器的支持而无法使用 inline-block，请告诉我，我们将从那里开始。

jQuery 解决方案：

<!doctype html>
    <head><title></title></head>
    <style type="text/css">
    ul {
      width: 300px;
  }
  li {
    width: 75px;
    height: 75px;
    margin-top: 10px;
    margin-right: 10px;
    display: inline-block;
  }
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="application/javascript"></script>
<script type="application/javascript">
$(document).ready(function() {
    var numitems =  $("#my_grid li").length;
    var numrows = Math.ceil(numitems / 3);
    var myheight = (numrows * 75) + (numrows * 10);
    $("ul#my_grid").height(myheight);
});
</script>
<body>
<ul id="my_grid">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
</html>

请注意，您需要找到 numrows 的上限，否则如果您有 10 个元素，您的高度就不够大。

jQuery 解决方案带有一个巨大的警告：这只有在您确切知道每个 li 的高度时才有效。如果您在任何时候决定需要动态确定大小（例如在 Pjotrovitz 的回答中），您需要小心确保在加载所有样式表之前您的函数不会执行，以便您的最终大小元素可以确定。否则，JavaScript 可能会在应用所有样式之前确定元素的高度，您会得到奇怪的结果。因此，我强烈建议尽可能让浏览器和 CSS 处理所有布局任务。

【讨论】：

嗨内特。我知道我可以在我的 css 中设置
为您添加了一个测试 HTML 页面，显示此方法有效（至少在 FF3、Chrome、Safari、Opera 和 IE8 中）。不确定您需要兼容哪些浏览器。
感谢 Nate 的辛勤工作。从更广泛的意义上来说，我对如何为此构建 jquery 感到好奇，但我会试一试 inline-block。
感谢内特。不幸的是 inline-block 对我不起作用——但你的 jquery 解决方案可以。感谢您的帮助。

【解决方案2】：

li 项目数：var numitems = $("#my_grid li").length;

【讨论】：

感谢 nico，但这仍然没有在 html 中产生值——我得到

【解决方案3】：

这里是如何获取所有<li> 的高度：

var heightofChildren;
//Loop through the children:
$("#my_grid").children().each(function(index, obj){
    // The height of an element included padding and margin is:
    heightofChildren += obj.outerHeight();
};
//Now set the height of the ul:
$("#my_grid").height(heightofChildren);

【讨论】：

【解决方案4】：

我认为这会满足您的需求 - 无法测试 atm。有空我会更新的。

var numitems =  $("#my_grid li").length;
var numrows = ( numitems / 3 );
var myheight = ((numrows * 75) + ((numrows -1 ) * 10));
$("#my_grid").css("height", myheight);

如果想进行一些贫民窟调试，请输入警报（numitems）；并确保你得到一个号码。你的选择器也可能搞砸了……

另外，如果您没有它，请获取适用于 Firefox 的 FireBug。安装完成后，按 Ctrl+Shift+C 用鼠标选择一个元素，然后去城里找出问题所在。

【讨论】：