Question

Jquery /在这里编程newb。我正在尝试动态地为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);

谢谢！

Answer 1

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

Answer 2

最好的方式：

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

解决方案是使用内联块并让浏览器确定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>

请注意，您需要找到数字的上限，否则如果您有10个元素，则您的身高不会太大。

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

Answer 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);

Answer 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）;并确保你收到一个号码。您的选择器也可能搞砸了......

此外，如果您没有，请获取FireBug for Firefox。安装完毕后按Ctrl + Shift + C用鼠标选择一个元素，然后去城镇找出问题所在。

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

4 个答案: