jquery 查找“li”的数量“ul”中的项目并应用一些数学来计算“ul”的高度

发布于 2024-09-24 16:21:45 字数 412 浏览 5 评论 0原文

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

谢谢！

原文

Jquery/programming newb here. I'm trying to dynamically assign a height to a ul to 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.

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

⊕婉儿 2024-10-01 16:21:45

最好的方法：

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

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

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

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.

The jQuery solution:

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

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.

回复收藏 0 原文

孤城病女 2024-10-01 16:21:45

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

回复收藏 0 原文

白衬杉格子梦 2024-10-01 16:21:45

以下是获取所有

的高度的方法：

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

Here is how to get the height of all the <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);

回复收藏 0 原文

痞味浪人 2024-10-01 16:21:45

我认为这会做你想要的 - 无法测试自动取款机。我会尽可能更新。

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

如果想要进行一些 ghetto 调试，请添加一个警报（numitems）；并确保您能得到一个号码。你的选择器也可能被搞乱了...

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

I think think this will do what you want - can't test atm. I'll update when I can.

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

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.

回复收藏 0 原文

~没有更多了~