如何使用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"在$(window).load函数中尝试这个,以确保它们已经加载:

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