Question

所以我有一个水平滚动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。

Answer 1

您在CSS中没有设置width，因此使用css('width')可能会获得auto，因为这是宽度的默认CSS值，width()可以获得0，因为图像尚未加载且没有宽度？

要了解图像的实际情况，您必须等到它们被加载，但这样的事情应该有效：

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

$(window).on('load', function() {
    findWidth();
});

jQuery - .width（）在带有max-height的imgs上返回0

1 个答案: