How can I equalize the heights of divs in table based on the tallest div using jQuery?
I am creating a page that has a table with a bunch of images in it. Each image is wrapped in a set of divs. The images are user-added, so I have no control over the aspect ratio, but I will be enforcing a maximum width and height on uploaded images.
<table class="pl_upload">
<tr class="row1">
<td class="col1">
<div>
<div class="img-container">
<a href="#"><img src="img.jpg" width="182" alt="X" /></a>
</div>
</div>
</td>
.......
What I would like to do is calculate the height of the tallest image div in the table, and then make the all o开发者_C百科f the image divs that same height using jQuery.
I made a jsfiddle page for it here:
http://jsfiddle.net/Evolution/27EJB/
var max = 0;
$(".pl_upload img").each(function() {
if($(this).height() > max) {
max = $(this).height();
}
});
$(".img-container").height(max);
Not sure exactly what you are looking for, however this should be able to get the tallest image on the page and then set the div
's on the page to that height.
Also, per this answer if you wrap the function in $(window).load()
it should only be called once all images are loaded.
$(window).load(function() {
var tallest = 0;
$("img").each(function() {
var h = $(this).height();
if (h > tallest) {
tallest = h;
}
});
$("div").css("height", tallest);
});
Example on jsfiddle.
If this is not what you need please elaborate your question a bit.
Would something like this be what your looking for:
var Max = 0;
var Images = $(".img-container img");
Images.each(function(k,v){
$(this).load(function(){
if(Max < $(this).height())
{
Max = $(this).height();
}
if(k == Images.length)
{
$(".img.container").height(max);
}
});
})
Test Case: http://jsfiddle.net/27EJB/1/
Im not saying it works exactly how you want it but from your description this is what i come up with.
精彩评论