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

Question

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

ser*_*les 2 javascript math size jquery height

Jquery /编程newb在这里.我正在尝试动态地为a分配高度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);

Run Code Online (Sandbox Code Playgroud)

谢谢!

Answer 1

bev*_*qua 5

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

Answer 2

Nat*_*ndy 5

最好的方法:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

请注意,您需要找到numrows的上限,否则如果您有10个元素,则您的身高不会太大.

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

归档时间：	15 年，5 月前
查看次数：	25864 次
最近记录：	12 年，9 月前