jquery find number of 'li' items in a 'ul' and apply some math to calculate height of 'ul'
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!
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.
number of li items : var numitems = $("#my_grid li").length;
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);
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.
加载中,请稍侯......
精彩评论