使用jquery设置不同的高度

时间:2013-05-27 18:34:56

标签: jquery height scale

我有一个问题,我得到了箱子。 第一个包含图像,此图像的高度未知。 第二个是此图像旁边的左浮动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很安静我很抱歉我的英语不好,但我希望你能帮助我。

1 个答案:

答案 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类..

希望这会有所帮助。 祝你好运。