Each function in jQuery
<p>i have four div in one parent and each contains one image. i want show width of that particular image in respective div. but my function return the last image width in all container.</p>

<pre><code>&lt;head&gt;
  &lt;script type="text/javascript" src="jquery-1.7.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function () {
    $('.box').each(function () {
      var height = $(this).find('img').height();
      var width = $(this).find('img').width();
      $('.width').text(width)
    })
  })
  &lt;/script&gt;
  &lt;style&gt;
  .box {
    float:left;
    margin-left:20px;
    position:relative
  }
  .width {
    position:absolute;
    left:0;
    top:0;
    color:#FFF;
    font-size:20px;
  }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;div class="width"&gt;&lt;/div&gt;
      &lt;img src="img/sample1.jpg" height="200" width="300" /&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;div class="width"&gt;&lt;/div&gt;
      &lt;img src="img/sample2.jpg" height="200" width="350" /&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;div class="width"&gt;&lt;/div&gt;
      &lt;img src="img/sample3.jpg" height="200" width="150" /&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;div class="width"&gt;&lt;/div&gt;
      &lt;img src="img/sample4.jpg" height="200" width="100" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>
