Each function in jQuery

Question

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.

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

To make it easier: jsfiddle.net/vhzL4/11

Praveen Gowda I V
– Praveen Gowda I V

2012-07-13 10:31:09 +00:00
Commented Jul 13, 2012 at 10:31 — Praveen Gowda I V
– Praveen Gowda I V, Commented Jul 13, 2012 at 10:31

James Allardice · Accepted Answer · 2012-07-13 10:06:43Z

10

You need to target the .width element that is a child of this, as you've done to find the img element:

$(function (){
    $('.box').each(function (){
        var $this = $(this); //Cache jQuery-wrapped `this` (more efficient)
        var height= $this.find('img').height();
        var width=  $this.find('img').width();
        $this.find('.width').text(width); //Find the descendant `.width` element
    });
}); //You missed these 2 semicolons.

answered Jul 13, 2012 at 10:06

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jitendra Pancholi Over a year ago

This code is correct. You were giving width to each div(width class) instead of current div. $(this).find('.width').text(width) will only set the set to current div not all four.

Jitender Over a year ago

can i also get box number with width

Jitender Over a year ago

@james: like i have four box. i want to get box. first box should have text 1, second 2 etc

James Allardice Over a year ago

@amit - You can use $this.index() to get the index of the element relative to its siblings.

Inkbug · Accepted Answer · 2012-07-13 10:07:35Z

2

$(this).find('.width').text(width).

answered Jul 13, 2012 at 10:07

Inkbug

1,6931 gold badge11 silver badges29 bronze badges

Comments

Matt · Accepted Answer · 2012-07-13 10:10:00Z

2

$('.width').text(width);  // bad

'.width' is matching all 4 .width elements and then text() is only acting on one of them

you want

$(this).find('.width').text(width);

here we specify we only want the .width element found under (this)

answered Jul 13, 2012 at 10:10

Matt

3,8503 gold badges32 silver badges33 bronze badges

Comments

CKKiller · Accepted Answer · 2012-07-13 10:07:30Z

1

use $(this).parent().children('.width') instead of $('.width')

answered Jul 13, 2012 at 10:07

CKKiller

1,4321 gold badge16 silver badges20 bronze badges

2 Comments

James Allardice Over a year ago

This will still set the text of all .width elements (since $(this).parent() will return div.container).

CKKiller Over a year ago

He's changed it since I answered, was multiple div.containers.

Collectives™ on Stack Overflow

Each function in jQuery

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Related