1

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

4

1 回答 1

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

希望这可以帮助。祝你好运。

于 2013-05-27T18:37:26.150 回答