我有一个问题,我得到了箱子。 第一个包含图像,此图像的高度未知。 第二个是此图像旁边的左浮动div元素。 该面板应与图像的高度一样长。
.image = container for image
.panel = container for panel
.image_post = contains image and panel
我用这个jquery代码做了这个:
$(document).ready(function () {
var currentHeight_Image = $('.image').height();
var currentWidth_Image = $('.image').width();
var currentWidth_Panel = $('.panel').width();
var currentWidth_Image_Post = $('.image_post').width();
$(".panel").css({"height": currentHeight_Image - 2});
$(".image_post").css({"height": currentHeight_Image});
$(".image_post").css({"width": currentWidth_Image + currentWidth_Panel + 2});
$(".wrap").css({"width": currentWidth_Image + currentWidth_Panel + 2});
});
现在的主要问题是,我得到的照片超过10张,所以每个面板的高度都与之前不同。
代码工作正常,在第一个面板高度,但在第二个面板高度,它不起作用,因为它从第一个到第二个高度。
我对jquery很安静我很抱歉我的英语不好,但我希望你能帮助我。
答案 0 :(得分:1)
使用.image_post上的jQuery选择器为每个循环运行一个假设那些是你想要迭代的容器,代码示例很快就会跟进。
$(document).ready(function () {
$(".image_post").each ( function () {
alert("starting fix");
var currentHeight_Image = $('.image',this).height();
var currentWidth_Image = $('.image',this).width();
var currentWidth_Panel = $('.panel',this).width();
var currentWidth_Image_Post = $(this).width();
$(".panel").css({"height": currentHeight_Image - 2});
$(this).css({"height": currentHeight_Image});
$(this).css({"width": currentWidth_Image + currentWidth_Panel + 2});
$(".wrap").css({"width": currentWidth_Image + currentWidth_Panel + 2});
});
});
我还没有对此进行测试,但我希望这可以解释你应该做些什么。 这里是在jsFiddle测试... 我仍然不确定你想要做什么,但是这将运行你在不同的.image_post上计划的任何东西。 请注意,在您的示例中没有.wrap类..
希望这会有所帮助。 祝你好运。