子の画像幅を見つけて、親のdivjqueryを含むにそれを適用します

Question

を持っています <img> いくつかの <p>内側に <div>.

子供のIMGの幅を取得し、それを親divの幅に適用して、テキストの段落がIMGと同じ幅に包まれるようにしたいと思います。

同じページで複数の反復にこれを行うことができます。

バックグラウンド：Masonry JQueryプラグインを使用するWordPressテーマを開発しています（http://desandro.com/resources/jquery-masonry）。私のテーマには、Gridaliciousテーマと共通点があります（http://suprb.com/apps/gridalicious）しかし、ポスト幅とサイズは画像幅によって決定され、均一ではありません。

私のhtml / cssはきれいですが、私のjquery / javascriptはかなり不安定です - しかし、いくつかのポインターを得ることができれば、私はそれで作業できるはずです。

どんな助けも本当に感謝しています。

Answer 1

これは完全に機能します。 $（document）.ready（）の代わりに$（window）.load（）を使用する必要があることに注意してください。$（document）.ready（）firesが実際にロードされるため、画像には幅がないためです。

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

編集： これは、 最初 Divの画像。インデックス（[0]）を変更して、Divの別の画像のベースに基づいて変更します。

編集2： .width（）関数にジョンの修正を適用しました。

Answer 2

これにより、ページ上のすべてのDIVが見つかり、幅をIMG Child Elementの幅に等しく設定します。

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

Answer 3

これにはJavaScriptをまったく使用する必要はありません。画像とPをChild Divに入れた場合、これはChrisのソリューションのように純粋にCSSで行うことができます（JSFiddle： http://jsfiddle.net/glee/qs8gj/ 次の質問には次のようになります。CSS -1つの子供の幅に合うように親divを縮小し、もう一方の子供の幅を制限します

トリックは、親divを...に設定することです...

display: table-cell;

画像divに...

display: table-row;
width: 1px;

...そして、段落のテキストを含むdiv

display: table-cell;
width: 1px;

チャームのような作品！