0

所以我有一个水平滚动的 div，我需要根据其中动态生成的图像列表找出该 div 需要多宽。

我想使用 jQuery 来查找所有图像的宽度，并将 div 的宽度设置为该整数。

这是我的 jQuery 不起作用：

<script>

    function findWidth() {

        var totalwidth = 0;
        $('img.you').each(function() {
            totalwidth += $(this).width();
            console.log($(this).css("width"));
        });
        $('#scrollbox').css("width", totalwidth);

    }

    $(document).ready(function() {
        findWidth();
    });

</script>

应用于我的每张图片的 CSS：

.you {
    max-height: 215px;
    position: relative;
    float:left;
    border: 7px solid #f5f5f5;
    margin-left: 15px;
    box-shadow: 0 2px 7px rgb(70, 70, 70);
}

我试过 .width() 和 .css("width")... 什么都没有。

我试过 $(document).ready() 和 .load()... 什么都没有。

这是我的 PHP，它显示了我在其他地方填充的数组中的所有图像：

<?php

    //$myImages is an array of links.
    $index = 0;
    foreach($myImages as $key=>$value) {
        // do stuff
        $index++;

        echo <<<EOF
        <img class="you" src="$value" alt="">
EOF;

    }
?>

问题：

问题是无论它是什么图像，都会保持记录 0。

4

1 回答 1

1

You have no width set in the CSS, so using css('width') probably gets you auto, as that is the default CSS value for width, and width() gets you 0, as the images are'nt loaded yet and have no width ?

To get the actual with of the images, you'll have to wait until they are loaded, but something like this should work:

function findWidth() {
    var totalwidth = 0;
    $('img.you').each(function() {
        totalwidth += $(this).width();
    });
    $('#scrollbox').css("width", totalwidth);
}

$(window).on('load', function() {
    findWidth();
});
于 2013-05-11T21:47:24.887 回答