title: jQuery: calculate the height of multiple elements and apply them to the top-margin of each parent
body: <p>I'm trying to use jQuery to calculate the height of a <code>div</code> containing text, and to add that value to the top-margin of its parent. These blocks of text are intended as captions for images, so their height will vary one from the other. I have it currently so that jQuery calculates the height of the first instance of this in the HTML, and applies this to the margin of that <em>and all following parents</em> of the given class. As a result, only the first caption drops down the correct amount, the others just drop down the amount required of the first instance.</p>
  
  <p>I need jQuery to calculate things individually for each instance. I had wondered whether it involved <code>.each</code> in some way, but I'm not sure. What do I have to do?</p>
  
  <p>Here is an example of how it is currently: <a href="http://www.robbiedawson.com/text/article1.html" rel="nofollow">http://www.robbiedawson.com/text/article1.html</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
   var elements = $(".imagecaption")
   var topMargin = $(elements).outerHeight();
  
   if (innerWidth &gt; 980) {
  
       $(".imagewrap").hover(function() {
           $(this).css("margin-top", topMargin);
  
       }, function() {
           $(this).css("margin-top", 7);
       }
     )
   };
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;div class="imagewrap"&gt; 
      &lt;img class="image" src="" style=""&gt;
      &lt;div class="imagecaption"&gt;The caption goes here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>