3

我在一个父级中有四个 div，每个 div 包含一个图像。我想在相应的 div 中显示该特定图像的宽度。但我的函数返回所有容器中的最后一个图像宽度。

<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>
4

4 回答 4

10

您需要定位作为.width的子元素的元素this，就像您为找到该img元素所做的那样：

$(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.
于 2012-07-13T10:06:43.750 回答
2

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

于 2012-07-13T10:07:35.947 回答
2 
$('.width').text(width);  // bad

'.width' 匹配所有 4 个 .width 元素，然后 text() 仅作用于其中一个

你要

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

这里我们指定我们只想要在 (this) 下找到的 .width 元素

于 2012-07-13T10:10:00.043 回答
1

使用$(this).parent().children('.width')而不是$('.width')

于 2012-07-13T10:07:30.513 回答