finden Kind Bildbreite und wenden es Eltern div jquery enthält

Question

Ich habe eine <img> und einige <p> ist in einem <div>.

Ich möchte die Breite des Kindes img bekommen und es auf die Breite des Eltern div gelten, so dass die Absätze von Text auf die gleiche Breite wie das img wickeln wird.

Ich möchte in der Lage sein, dies auf der gleichen Seite, um mehrere Iterationen zu tun.

Hintergrund: Ich bin ein Wordpress-Theme zu entwickeln, die das Mauerwerk jquery Plugin verwendet ( http://desandro.com/resources/jquery -masonry ). Mein Thema hat etwas gemeinsam mit Gridalicious Thema ( http://suprb.com/apps/gridalicious ) aber die Post Breiten und Größen werden von der Bildbreite vorgegeben werden und werden nicht einheitlich sein.

Mein HTML / CSS ist makellos sauber, aber meine Jquery / javascript ist ziemlich wackelig -. Aber wenn ich einige Hinweise bekommen, ich soll mit ihm arbeiten kann

Jede Hilfe wirklich geschätzt.

Answer 1

Das funktioniert perfekt. Beachten Sie, dass Sie $ (Fenster) .load () anstelle von $ (document) .ready () zu verwenden, weil $ (document) .ready () ausgelöst wird, bevor Bilder tatsächlich geladen wird, und somit werden die Bilder keine Breite haben.

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

Edit: Beachten Sie, dass dies die Breite der Basis wird aus dem zuerst Bild im div. Einfach den Index ändern ([0]) wieder ein anderes Bild im div zu stützen.

Bearbeiten. 2: Applied Johns Korrektur auf der .width () Funktion

Answer 2

Damit wird alle divs auf der Seite finden und stellen ihre Breite gleich ihr img Breite des Kind Elements.

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

Answer 3

Sie brauchen nicht Javascript überhaupt für diesen Einsatz. Wenn Sie das Bild und die p in Kind divs setzen, kann dies rein wie in Chris-Lösung in CSS getan werden (hier ist der JSFiddle: http://jsfiddle.net/glee/qs8GJ/ auf die folgende Frage SO: CSS - schrumpft einen Elternteil div ein Kind der Breite zu passen und die Breite des anderen Kindes beschränkt

Der Trick besteht darin, die Eltern zu setzen div ...

display: table-cell;

das Bild div ...

display: table-row;
width: 1px;

... und die div mit dem Absatztext zu

display: table-cell;
width: 1px;

Arbeiten wie Charme!