jquery在'ul'中找到'li'项的数量并应用一些数学来计算'ul'的高度
[英]jquery find number of 'li' items in a 'ul' and apply some math to calculate height of 'ul'
问题描述
Jquery /编程newb在这里。 我正在尝试动态地为ul分配高度以强制进行一些滚动。 我的方法是检测列表中有多少项，然后应用一些数学来计算我的ul的高度（我已经尝试过height（）;但它没有给出正确的数字; ul是缩略图的网格，显示内联，显示连续三个项目，所以我想我必须计算这个高度）。 图像为75像素的正方形，图像之间的边距为10px。
我想出了这个，但它不起作用：
var numitems = $("#my_grid li").size();
var numrows = ( numitems / 3 );
var myheight = ((numrows * 75) + [(numrows -1 ) * 10]);
$("ul#my_grid").height(myheight);
谢谢！
4 个解决方案
解决方案1
5 2010-09-23 19:23:14
li项数： var numitems = $("#my_grid li").length;
解决方案2
5 已采纳 2010-09-23 19:34:35
最好的方法：
<!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>
请注意，您需要找到numrows的上限，否则如果您有10个元素，则您的身高不会太大。
jQuery解决方案带来了一个巨大的警告 ：只有当你确切了解每个li的高度时，这才会有效。 如果您在任何时候决定需要动态确定大小（例如在Pjotrovitz的答案中），您需要小心确保在所有样式表都已加载之前您的函数不会执行，以便您的最终大小元素可以确定。 否则，JavaScript可能会在应用所有样式之前确定元素的高度，您将得到奇怪的结果。 出于这个原因，我强烈建议让浏览器和CSS尽可能地处理所有布局任务。
解决方案3
1 2010-09-23 20:15:05
以下是如何获得所有<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
0 2010-09-23 19:53:21
我认为这会做你想要的 - 无法测试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附加 <li> 一个项目 <ul> 到新 <ul>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.