0

ネストされた画像の幅を取得しようとしています。次の HTML コードがあります。

<div class="slide" id="Slide1">
        <a href="#" title="Some Title" target="_blank">
             <img src="images/photo1.jpg" alt="Slide 1" class="slideImg">
        </a>
        <div class="caption" style="width: 476px">
            <h1>Stuff</h1>
            <p>Some Stuff Description</p>
        </div>
    </div>
<div class="slide" id="Slide2">
        <a href="#" title="Some Title" target="_blank">
             <img src="images/photo.jpg" alt="Slide 2" class="slideImg">
        </a>
        <div class="caption" style="width: 476px">
            <h1>Stuff</h1>
            <p>Some Stuff Description</p>
        </div>
    </div>

jQuery を使用して、各 IMG の幅を取得したいので、(1024px - その幅) を正しい "CAPTION DIV" ( <div class="caption">) に設定できます。このスクリプトはどちらも、幅が「0」の 2 番目の画像を表示していますが、これは不可能なことです。

$('.slideImg').each(function(){
    alert($(this).width());             
 });
$('.slide').each(function(){
    alert($(this).attr('id'));
    alert($(this).find('a').find('img').width());
});

前もって感謝します！

4

4 に答える 4

1

正常に動作することを確認しました。

   $(document).ready(function(){

      $('.slide').each(function(){
        alert($(this).attr('id'));
            alert($(this).find('a').find('img').width());
});

    });
于 2012-10-09T12:50:26.857 に答える
0

画像が非表示になっているかどうかを確認することもできます。jqueryには非表示要素の次元の計算に問題があるため

于 2012-10-09T12:53:40.287 に答える
0

私もそうでしたし、それは私のために働きます。

どのブラウザを使用していますか?

Chrome 22、IE 9、Firefox 15 でテストしました

于 2012-10-09T12:51:32.343 に答える
0

jQuery の実行中に画像が完全に読み込まれていない可能性があります。ここを参照してください:何かを実行する前にすべての画像がロードされるのを jQuery に待機させる公式の方法

また、clientWidth実際にレンダリングされた画像の幅も表示されます

あなたは試すことができます：

$('.slide').load(function() {
  alert(this.clientWidth);
})
于 2012-10-09T13:00:13.777 に答える