set different heights using jquery

Question

I got a question, i got to boxes on my side. The first one contains an image, the height of this image is unknown. The second one is a left floated div element next to this image. This panel shall be as long as the height of the image.

.image = container for image
.panel = container for panel
.image_post = contains image and panel

I did this with this jquery code :

 $(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});
    });    

The main problem now is, I get more than 10 of these pictures, so the height of each panel is different to the one before.

The code works fine, at the first panel-height, but at the second ones, it doesnt work, because it takes the height from the first one to the second one.

Im quiet new to jquery an im sorry for my bad English, but i hope you may help me.

Answer 1

run a for each loop using a jQuery selector on the .image_post assuming those are the containers you wish to iterate, code sample to follow shortly.

 $(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});
  });      

}); 

I have yet to test this, but I hope this explains what you should do. Here it is tested in jsFiddle... I'm still unsure what you are trying to do, but this will run whatever you were planning too on the different .image_post. Please note that in your example there is no .wrap class..

Hope this helps. Good luck.