3

1 つの親に 4 つの div があり、それぞれに 1 つの画像が含まれています。それぞれの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の子である要素をターゲットにする必要があります。thisimg

$(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 
$('.width').text(width);  // bad

'.width'は4つの.width要素すべてに一致し、text（）はそのうちの1つにのみ作用します

あなたが欲しい

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

ここでは、（this）の下にある.width要素のみが必要であることを指定します

于 2012-07-13T10:10:00.043 に答える
2

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

于 2012-07-13T10:07:35.947 に答える
1

$(this).parent().children('.width')の代わりに使用$('.width')

于 2012-07-13T10:07:30.513 に答える