jQuery:给每个 父级与其 子级相同的宽度

Question

每个图片container (figure) 需要取其包含的image (img) 的width 并放置一个(figcaption)与容器的宽度相同。

如果我只使用一个容器，它可以工作，但是当我使用多个图形时，它会将每个图形设置为第一个图像的大小。

所以我在 foreach 循环中犯了一个逻辑错误，但找不到解决方案。有什么帮助吗？我是 jQuery 的新手。

<figure><img><figcaption></figcaption></figure>
<figure><img><figcaption></figcaption></figure>
<figure><img><figcaption></figcaption></figure>

<script>  
$(document).ready(function(){
    //make figure the width of its image child
    $('figure').each(function() {
    var childWidth = $('figure img').width();
    console.log(childWidth);
    $('figure').width(childWidth);
    })
});
<script> 

look at the html/css code

Answer 1

您正在 .each() 中选择和设置所有 figure 元素 width。替代

var childWidth = $("img", this).width(); // selects current `figure` `img`

对于

var childWidth = $('figure img').width(); // selects all `img` elements

和

$(this).width(childWidth); // selects current `figure`

对于

$('figure').width(childWidth); // selects all `figure` elements