Question

我试图在我的类img-wrap中获取每个图像的宽度，并将该宽度应用于每个项目的img-caption类。我下面的代码仅适用于第一项。

    <div class="img-wrap">
        <img src="http://lorempixel.com/300/100" />
        <div class="img-caption">aa</div>
    </div>
    <div class="img-wrap">
        <img src="http://lorempixel.com/400/100" />
        <div class="img-caption"></div>
    </div>
    <div class="img-wrap">
        <img src="http://lorempixel.com/500/100" />
        <div class="img-caption">cc</div>
    </div>

    <script>
    var imgwidth = 0;
    $('.img-wrap').each(function (index, value) {
        imgwidth = $('.img-wrap img').width();
        if ($('.img-caption').text() === '') {} else {
            $(this).css("background-color", "#000");
            $(this).css("color", "#fff");
            $(this).css("width", imgwidth);
        }
    });
    </script>

然后该宽度适用于所有类。我在这里错过了什么来获得应用于每个img-caption的宽度。例如在我的例子中，而不是它们都是300px宽，因为这是第一张图像的宽度，它们应该是300,400,500。我有其他类似的东西，因为我可能会在稍后添加一些内容但与问题无关。

Answer 1

尝试：

imgwidth = $(this).children('img').width();

以下是工作示例：http://jsfiddle.net/EmE39/

Answer 2

您需要等待图像加载才能找到它的宽度

$('.img-wrap img').load(function () {
    var $this = $(this);
    $this.parent().css({
        "background-color": "#000",
        "color": "#fff",
        "width": $this.width()
    });
});

Jquery获取每个图像的宽度

2 个答案: