trouver la largeur de l'image de l'enfant et l'appliquer à contenant div parent jquery

Question

J'ai un <img> et certains <p> est à l'intérieur d'un <div>.

Je veux obtenir la largeur de la img enfant et l'appliquer à la largeur de la div parent afin que les paragraphes du texte se terminera à la même largeur que l'img.

Je veux être en mesure de le faire à plusieurs itérations sur la même page.

Contexte: Je développe un thème wordpress qui utilise le plugin jquery maçonnerie ( http://desandro.com/resources/jquery -Maçonnerie ). Mon thème a quelque chose en commun avec le thème Gridalicious ( http://suprb.com/apps/gridalicious ) mais les largeurs et dimensions post seront dictées par la largeur de l'image et ne sera pas uniforme.

Mon html / css est impeccable mais mon jquery / javascript est assez fragile -. Mais si je peux obtenir quelques conseils je devrais être en mesure de travailler avec elle

Toute aide vraiment apprécié.

Answer 1

Cela fonctionne parfaitement. Notez que vous devez utiliser $ (fenêtre) .load () au lieu de $ (document) .ready (), parce que $ (document) .ready () feux avant que les images sont effectivement chargées, et donc les images auront aucune largeur.

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

Modifier Notez que ce basez la largeur hors du first image dans la div. Il suffit de changer l'index ([0]) pour y fonder une autre image de la div.

Edit 2:. Correction de John appliquée sur la fonction .width ()

Answer 2

trouvera tous les divs sur la page et définissez leur largeur égale à la largeur de leur élément enfant img.

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

Answer 3

Vous ne devez utiliser Javascript du tout pour cela. Si vous mettez l'image et le p en divs enfants, cela peut être fait uniquement en CSS comme dans la solution de Chris (voici le jsFiddle: http://jsfiddle.net/glee/qs8GJ/ à la question suivante SO: css - réduire un div parent pour adapter la largeur d'un enfant et limiter la largeur de l'autre enfant

L'astuce est de mettre le parent div ...

display: table-cell;

l'image div ...

display: table-row;
width: 1px;

... et la div contenant le texte du paragraphe à

display: table-cell;
width: 1px;

Fonctionne comme le charme!