如何使用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()); 
});