Javascript jquery查找'；李'；a'中的项目；ul'；并应用一些数学来计算'；ul'；_Javascript_Jquery_Math_Size_Height

Javascript jquery查找'；李'；a'中的项目；ul'；并应用一些数学来计算'；ul'；

javascript jquery math

Javascript jquery查找'；李'；a'中的项目；ul'；并应用一些数学来计算'；ul'；,javascript,jquery,math,size,height,Javascript,Jquery,Math,Size,Height,Jquery/这里是编程新手。我试图动态地为ul分配一个高度，以强制进行一些滚动。我的方法是检测列表中有多少项，然后应用一些数学计算我的ul的高度（我尝试了height（）；但它没有给出正确的数字；ul是一个缩略图像的网格，内联显示，一行显示三项，所以我想我必须计算这个高度）。图像是75像素的正方形，图像之间有10像素的间隔我想到了这个，但它不起作用： var numitems = $("#my_grid li").size(); var numrows = ( numitems / 3

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

谢谢大家!

li项目数：

var numitems=$（“#我的网格li”）。长度
最佳方式：
<!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>

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


保险商实验室{
宽度：300px；
}
李{
宽度：75px；
利润率：10px；
显示：内联块；
}

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验


解决方案是使用内联块，让浏览器确定ul的适当高度。如果你不能使用内联块，因为你需要支持旧的浏览器，让我知道，我们会从那里开始
jQuery解决方案：
<!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>

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


保险商实验室{
宽度：300px；
}
李{
宽度：75px；
高度：75px；
边缘顶部：10px；
右边距：10px；
显示：内联块；
}
$（文档）.ready（函数（）{
var numitems=$（“#我的网格li”）.length；
var numrows=Math.ceil（numitems/3）；
var myheight=（numrows*75）+（numrows*10）；
$（“我的网格”）。高度（我的高度）；
});

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验


请注意，您需要找到numrows的天花板，否则，例如，如果有10个元素，您的高度将不够大
jQuery解决方案附带了一个巨大的警告：
只有当你确切知道每一个李有多高时，这才有效。如果您在任何时候决定需要动态确定大小（如Pjotrovitz的回答），则需要小心确保在加载所有样式表之前不会执行函数，以便可以确定元素的最终大小。否则，JavaScript可能会在应用所有样式之前确定元素的高度，您将得到奇怪的结果。因此，如果可能的话，我强烈建议让浏览器和CSS处理所有的布局任务。
我认为这将满足您的需要-无法测试atm。我会在可能的时候更新
var numitems =  $("#my_grid li").length;
var numrows = ( numitems / 3 );
var myheight = ((numrows * 75) + ((numrows -1 ) * 10));
$("#my_grid").css("height", myheight);

如果你想做一些犹太人区的调试，抛出一个警报（numitems）；并确保你得到一个号码回来。您的选择器也可能出错
此外，如果您没有Firefox，请购买FireBug for Firefox。安装完毕后，按Ctrl+Shift+C键，用鼠标选择一个元素，然后进城找出问题所在。
以下是如何获取所有元素的高度：
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);

你能假设所有li
元素都有相同的高度吗？是的，它们都有75px的高度。你确定myheight确实包含一个值，也可以尝试显式使用Thank nico，但这仍然不能在html中产生值——我得到的是Hi Nate。我知道我可以在css中设置的宽度/高度，这没有问题。问题是我有一大堆这样的列表，它们是从图像库生成的，有不同数量的图像，因此高度不同。所以，我不能只宣布一个高度，然后就放弃它。我需要知道生成列表的确切高度（我想是因为它是内联的，所以浏览器没有注意到它），并将其作为样式声明写入。为您添加了一个测试HTML页面，显示了这一点（至少在FF3、Chrome、Safari、Opera和IE8中）。不确定您需要与哪些浏览器兼容。感谢Nate的辛勤工作。我对如何为此构造jquery有更一般的好奇，但我将给内联块一个机会。不幸的是，内联块对我不起作用——但您的jquery解决方案起作用。谢谢你的帮助。