trovare bambino larghezza dell'immagine e applicarlo alla contenente genitore div jquery

Question

Ho un <img> e alcuni <p> trova all'interno di un <div>.

Voglio ottenere la larghezza della IMG bambino e applicarlo alla larghezza del div genitore in modo che i paragrafi di testo andranno a capo alla stessa larghezza della IMG.

Voglio essere in grado di fare questo per più iterazioni sulla stessa pagina.

Sfondo: Sto sviluppando un tema WordPress che utilizza la muratura plugin jQuery ( http://desandro.com/resources/jquery -Lavori in muratura ). Il mio tema ha qualcosa in comune con Gridalicious tema ( http://suprb.com/apps/gridalicious ) ma le larghezze postali e le dimensioni saranno dettate dalla larghezza dell'immagine e non saranno uniformi.

Il mio html / css è immacolata, ma il mio jquery / javascript è piuttosto traballante -. Ma se posso ottenere alcune indicazioni che dovrebbero essere in grado di lavorare con esso

Qualsiasi aiuto veramente apprezzato.

Answer 1

Questo funziona perfettamente. Si noti che è necessario utilizzare $ (window) .load () invece di $ (document) .ready (), perché $ (document) .ready () incendi prima che le immagini vengono caricati, e quindi le immagini non avranno larghezza.

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

Modifica Si noti che questo si baserà la larghezza fuori del prima immagine nel div. È sufficiente modificare l'indice ([0]) di basare fuori un'altra immagine nel div.

Modifica. 2: Correzione di Giovanni applicata sulla funzione .width ()

Answer 2

In questo modo trovare tutti i div sulla pagina e impostare la loro larghezza uguale alla larghezza loro img di elemento secondario.

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

Answer 3

Non c'è bisogno di usare JavaScript a tutti per questo. Se si mette l'immagine e il p in div bambino, questo può essere fatto esclusivamente nei CSS come nella soluzione di Chris (ecco la JSFiddle: http://jsfiddle.net/glee/qs8GJ/ alla seguente domanda SO: css - ridurre un div genitore per adattare la larghezza di un bambino e vincolare la larghezza della altro bambino

Il trucco è quello di impostare il genitore div a ...

display: table-cell;

l'immagine div a ...

display: table-row;
width: 1px;

... e il div che contiene il testo paragrafo per

display: table-cell;
width: 1px;

funziona come fascino!