如何使用JQuery添加div中所有圖像的寬度

Question

我正在尋找一種方法將div的寬度更改爲該div內圖像的所有寬度的總和。

換句話說，我希望＃頁面內容的寬度等於它內部所有圖像的寬度。這是因爲我希望page-content div比瀏覽器窗口更寬，以便用戶可以從左向右滾動。

我的代碼如下：

<div id="page-content"> 
    <div id="gallery"> 
     <div> 
      <a href="#" class="shutterset"> 
       <img src="images/pic1.jpg"/> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic2.jpg" /> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic3.jpg" /> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic4.jpg" /> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic5.jpg" /> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic6.jpg" /> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic7.jpg" /> 
      </a> 
      <a href="#" class="shutterset" > 
       <img src="images/pic8.jpg" /> 
      </a> 
     </div> 
     <div class="clear"> </div> 
     <p>hi</p> 
    </div> 
</div> 

我嘗試了jQuery的是：

 $(document).ready(function() { 
     $("p").html($("#gallery img:first").width()); 
    }); 

我做這個測試，看看是否被計算的寬度，但它似乎不是。結果總是0，而不是圖像的寬度。

希望得到任何幫助

西多夫

Answer 1

我建議增加一類的圖片，你有聯繫，即<img class="shutterimg"並在$（窗口）.load函數試圖對此予以肯定，他們已加載：

var totalwidth = 0; 
$('img.shutterimg').each(function() { 
    totalwidth += $(this).width(); 
}); 
$('#gallery').width(totalwidth); 

Answer 2

圖片寬度不計算直到圖象被下載，除非指定了width屬性。您的處理程序在$(document).ready()上執行 - 這是整個DOM已加載的時候，但幾乎可以肯定在加載圖像之前。

請等待$(window).load()事件：當加載所有內容（圖像，樣式表和腳本）時，會觸發此事件。

$(window).load(function() { 
    $("p").html($("#gallery img:first").width()); 
});