title: Jquery get the width of each image
body: <p>I am trying to get the width of each image in my class img-wrap and apply that width to the img-caption class for each item.
  The code I have below only works for the first item.</p>
  
  <pre><code>    &lt;div class="img-wrap"&gt;
          &lt;img src="http://lorempixel.com/300/100" /&gt;
          &lt;div class="img-caption"&gt;aa&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="img-wrap"&gt;
          &lt;img src="http://lorempixel.com/400/100" /&gt;
          &lt;div class="img-caption"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="img-wrap"&gt;
          &lt;img src="http://lorempixel.com/500/100" /&gt;
          &lt;div class="img-caption"&gt;cc&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
      var imgwidth = 0;
      $('.img-wrap').each(function (index, value) {
          imgwidth = $('.img-wrap img').width();
          if ($('.img-caption').text() === '') {} else {
              $(this).css("background-color", "#000");
              $(this).css("color", "#fff");
              $(this).css("width", imgwidth);
          }
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Then that width is applying to all classes.  What am I missing here to get the width to apply to each img-caption.
  Eg in my example instead of them all being 300px wide as this is the width of the first image they should be 300,400,500. I have the else like that as I am probably going to add something to the if later but not relevant to the question.</p>