找到子图像宽度并将其应用于包含父div jquery

Question

我在<img>内有一个<p>和一些<div>。

我想获取子img的宽度并将其应用于父div的宽度，以便文本的段落将包装为与img相同的宽度。

我希望能够在同一页面上进行多次迭代。

背景 我正在开发一个使用masonry jquery插件（http://desandro.com/resources/jquery-masonry）的wordPress主题。我的主题与Gridalicious主题（http://suprb.com/apps/gridalicious）有一些共同之处，但是帖子的宽度和大小将由图像宽度决定，并且不会是统一的。

我的html / css一尘不染，但我的jquery / javascript非常不稳定 - 但如果我能得到一些指示，我应该可以使用它。

真正感谢任何帮助。

Answer 1

这完美无缺。请注意，您必须使用$（window）.load（）而不是$（document）.ready（），因为$（document）.ready（）会在实际加载图像之前触发，因此图像将没有宽度。

$(window).load(function() {
    $('div').each(function() {
        $(this).width($(this).find('img').width());
    });
});

编辑：请注意，这将基于div中第一个图像的宽度。只需更改索引（[0]），使其基于div中的另一个图像。

编辑2：应用John对.width（）函数的修正。

Answer 2

这将找到页面上的所有div，并将它们的宽度设置为等于img子元素的宽度。

 $('.divselector').attr('width', $(this).find('img').attr('width'))

Answer 3

您根本不需要使用Javascript。如果你将图像和p放入子div中，这可以完全在CSS中完成，就像在Chris的解决方案中一样（这里是JSFiddle：http://jsfiddle.net/glee/qs8GJ/以下的SO问题： css - shrink a parent div to fit one child's width and constrain the width of the other child

诀窍是将父div设置为...

display: table-cell;

图像div为......

display: table-row;
width: 1px;

...以及包含段落文本的div

display: table-cell;
width: 1px;

像魅力一样工作！