How do you sequentially iterate a new property to the parents of a specified element on a page? (Includes code example)

How do you sequentially iterate a new property to the parents of a specified element on a page? (Includes code example)



  1. jQuery(function($) {     
                  
        $(document).ready(function(){ 
          
        // wrap the img with a div
        $('#post_content a').wrap('<div id="wrapper" style="position:relative"></div>'); 
        
        //add the overlay div
        $("#post_content a").before('<div id="overlay"></div>');    
       
        // make the overlay equal to the height of the img
      var h = $("img");
        $("#post_content").contents().find('#overlay').height(h.height());
         
        // make the overlay equal to the width of the img
        var w = $("img");
        $("#post_content").contents().find('#overlay').width(w.width());
        
        });
    });


Result
It uses the image height and width of the FIRST image on the page on ALL the images.

But
The images are different heights and widths

I need the jquery to take the width and height of each image accordingly.

I'm really new at this so sorry if this seems obvious.
Below is the erroneous result.


Thanks,
Marc


jquery question