jquery data（）メソッドは必ずしも機能していませんか？

Question

親divの幅にイメージのサイズを変更する信頼性の高いjqueryコードを作成するには、本当に問題があります。ときどき時にはうまくいきません。最初はIEはちょうど私を盗んでいますが、サファリ、ファイアフォックス、またはクロムが私の方法をも発射していない時があります。

$(".post-body img").each(function() { 
     $(this).data('width', $(this).width()); 
     $(this).data('height', $(this).height()); 
    }); 

私はwindow.load - functionにデータメソッドの幅と高さの幅を保存します。

その後、私はsetimgwidth（）関数を呼び出しています。

function setimgwidth() { 
    var bw = $('.post-body').width(); 
    $(".post-body img").each(function() { 
      if (bw < $(this).data('width')) { 
       $(this).attr('width', Math.round(bw)); 
       //calculate ratio height 
       var newHeight = (bw/$(this).data('width')) * $(this).data('height'); 
       $(this).attr('height', Math.round(newHeight)); 
      } 
    }); 
} 

ので、私は、親のdivは、その中の画像よりも小さい場合、画像は、親のdivの幅にリサイズする必要がありますチェックしています。

このメソッドが常に動作していない理由はわかりません。場合によっては、画像のサイズが変更されることもあります。

奇妙なことがありますか？あなたは何か良いことをするだろうか？ いくつかの他の方法？

は

編集

ありがとう：

jQuery(function($){//document ready 

    $(window).load(function(){ 

     //Save the original image width 
     $(".post-body p img, .post-body .wp-caption img").each(function() { 
      $(this).data('width', $(this).width()); 
      $(this).data('height', $(this).height()); 
     }); 

     //window resize event 
     $(window).resize(function() { 
      setimgwidth(); 
     }); 

     //set image width inside of .post-body 
     function setimgwidth() { 
      $(".post-body p img, .post-body .wp-caption img").each(function() { 
       console.debug($(this).data('width')); 
       console.debug($(this).data('height')); 
      }); 
     } 

     //call image-resize functions onload 
     setimgwidth(); 

    }); 

});//document ready 

コンソールは常に画像の幅と高さは、あなたが$(this).attr('width');を使用している一つの場所で0

Answer 1

であることを私に語ったのに対し、他にお$(this).width()を使用しています。 .width()と.height()を試してみてください、私はあなたが両方の場所で、使用されなければならないものであると考えている：

$(".post-body img").each(function() { 
    $(this).data('width', $(this).width()); 
    $(this).data('height', $(this).height()); 
}); 

$(".post-body img").each(function() { 
     if (bw < $(this).data('width')) { 
      $(this).width(Math.round(bw)); 
      //calculate ratio height 
      var newHeight = (bw/$(this).data('width')) * $(this).data('height'); 
      $(this).height(Math.round(newHeight));    
     } 
}); 

も（おそらく関係ありません）あなたは、データの幅と高さは、あなたの後の各画像の属性を設定すべきではありません彼らの次元を変える？

$(".post-body img").each(function() { 
     if (bw < $(this).data('width')) { 
      $(this).width(Math.round(bw)); 
      //calculate ratio height 
      var newHeight = (bw/$(this).data('width')) * $(this).data('height'); 
      $(this).height(Math.round(newHeight)); 
      $(this).data("width", Math.round(bw)); 
      $(this).data("height", newHeight); 
     } 
}); 

そして@Emmettが彼のコメントで示唆されているように最終的に、私はあなたがオンロードイメージ寸法を格納している願っています：

$(".post-body img").load(function() { 
    $(this).data('width', $(this).width()); 
    $(this).data('height', $(this).height()); 
}); 

はwidth()とheight()は関係なく、CSSの、実際のコンテンツの幅と高さを返すことに注意してくださいこれらの値は、一度コンテンツ/イメージまたは完全にロードされたものだけがキャプチャされるべきです。

Answer 2

コード・レビュー（これが答えではない）

私はリファクタリング、コード。私はそれが今よりかなり読めると信じています。

function setImgWidth() { 
    var b = $(".post-body"); 
    var bw = b.width(); 

    b.find("img").each(function() { 
      var t = $(this); 
      var tw = t.data("width"); 
      var th = t.data("height"); 

      if (bw < tw) { 
       t 
        .width(Math.round(bw)) 
        .height(Math.round((bw/tw) * th)); 
      } 
    }); 
}