Javascript jquery 在“ul”中查找“li”项的数量并应用一些数学运算来计算“ul”的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3781776/
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
jquery find number of 'li' items in a 'ul' and apply some math to calculate height of 'ul'
提问by sergejules
Jquery/programming newb here. I'm trying to dynamically assign a height to a ulto force some scrolling. My method is to detect how many items are in the list and then apply some math to calculate a height of my ul (I have tried height(); but it was not giving the right number; the ul is a grid of thumbnail images, displayed inline, showing three items to a row, so I think I have to calculate this height). The images are 75 pixels square and there's a margin of 10px between images.
Jquery/编程新手在这里。我正在尝试为 a 动态分配高度ul以强制滚动。我的方法是检测列表中有多少项目，然后应用一些数学运算来计算我的 ul 的高度（我尝试过 height()；但它没有给出正确的数字；ul 是一个缩略图网格，内联显示，一行显示三个项目，所以我想我必须计算这个高度）。图像为 75 像素的正方形，图像之间的边距为 10 像素。
I came up with this, but it's not working:
我想出了这个，但它不起作用：
var numitems = $("#my_grid li").size();
var numrows = ( numitems / 3 );
var myheight = ((numrows * 75) + [(numrows -1 ) * 10]);
$("ul#my_grid").height(myheight);
Thank you!
谢谢！
回答by bevacqua
number of li items : var numitems = $("#my_grid li").length;
li 项数： var numitems = $("#my_grid li").length;
回答by Nate Bundy
The best way:
最好的方法：
<!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>
The solution is to use inline-block and let the browser determine the proper height for the ul. If you can't use inline-block since you need support for older browsers, let me know and we'll go from there.
解决方案是使用 inline-block 并让浏览器确定 ul 的适当高度。如果您因为需要对旧浏览器的支持而无法使用内联块，请告诉我，我们将从那里开始。
The jQuery solution:
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>
Note that you need to find the ceiling for numrows, otherwise your height wouldn't be large enough if you have 10 elements, for example.
请注意，您需要找到 numrows 的上限，否则，例如，如果您有 10 个元素，则您的高度将不够大。
The jQuery solution comes with a huge caveat: This will only work if you know exactly how tall each li will be. If you decide at any point that you need to determine the size dynamically (such as in Pjotrovitz's answer), you will need to be careful to make sure that your function does not execute until all stylesheets have been loaded so that the final size of your element can be determined. Otherwise, the JavaScript may determine the height of the element before all styles have been applied and you will get strange results. For that reason, I highly recommend letting the browser and CSS handle all of the layout duties if possible.
jQuery 解决方案带有一个巨大的警告：只有当您确切知道每个 li 的高度时，这才有效。如果您在任何时候决定需要动态确定大小（例如在 Pjotrovitz 的回答中），您将需要小心确保您的函数在加载所有样式表之前不会执行，以便您的最终大小元素可以确定。否则，JavaScript 可能会在应用所有样式之前确定元素的高度，并且您会得到奇怪的结果。因此，我强烈建议尽可能让浏览器和 CSS 处理所有布局任务。
回答by pederOverland
Here is how to get the height of all the <li>'s:
以下是获取所有<li>'s高度的方法：
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);
回答by Jason
I think think this will do what you want - can't test atm. I'll update when I can.
我认为这会做你想做的 - 无法测试 atm。我会在可以的时候更新。
var numitems = $("#my_grid li").length;
var numrows = ( numitems / 3 );
var myheight = ((numrows * 75) + ((numrows -1 ) * 10));
$("#my_grid").css("height", myheight);
If want to do some ghetto debugging, throw in an alert(numitems); and make sure you are getting a number back. Your selector may be messed up too...
如果想做一些贫民窟调试，请抛出警报（numitems）；并确保你得到一个号码。你的选择器也可能搞砸了...
Also, if you don't have it, get FireBug for Firefox. Once its installed press Ctrl+Shift+C select an element with your mouse and go to town figuring out what is wrong.
另外，如果您没有，请获取 FireBug for Firefox。安装后按 Ctrl+Shift+C 用鼠标选择一个元素，然后去镇上找出问题所在。
