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

J'ai un <img> et quelques <p> à l'intérieur d'un <div>. Je veux obtenir la largeur de l'enfant img et l'appliquer à la largeur de la div parente de sorte que les paragraphes du texte reviennent à la même largeur que l'img.trouver la largeur de l'image enfant et l'appliquer à parent contenant div jquery

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

Contexte: Je développe un thème wordpress qui utilise le plugin jquery de maçonnerie (http://desandro.com/resources/jquery-masonry). Mon thème a quelque chose en commun avec le thème de Gridalicious (http://suprb.com/apps/gridalicious) mais les largeurs de poteaux et les tailles seront dictées par la largeur de l'image et ne seront pas uniformes. Mon html/css est impeccable mais mon jquery/javascript est assez fragile - mais si je peux obtenir quelques pointeurs, je devrais être capable de travailler avec.

Toute aide vraiment appréciée.

Source

2010-07-07 theothersimon

Cela fonctionne parfaitement. Notez que vous devez utiliser $ (window) .load() au lieu de $ (document) .ready(), car $ (document) .ready() se déclenche avant que les images ne soient réellement chargées, et donc les images n'auront pas de largeur.

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

Edit: Notez que ce basez la largeur hors du première image dans la div. Changez simplement l'index ([0]) pour le baser sur une autre image dans le div.

Édition 2: Appliquée à la correction de John sur la fonction .width().

Source

2010-07-07 13:39:19

C'est un peu klunky. Par exemple, width() renvoie uniquement la largeur du premier élément sélectionné, donc la déclaration entière de 'img' est redondante. En outre, la charge sur la fenêtre n'est pas bonne car elle attendra que la page entière se termine le chargement. Mettre le script dans le pied de page fonctionnera très bien. –

@John Vous avez raison sur la largeur(). Cependant, la charge de la fenêtre est nécessaire. Nous * voulons * attendre que tout le contenu soit chargé, car à moins que la largeur des images ne soit spécifiquement déclarée, le navigateur ne saura pas quelle est la largeur de l'image, même une fois que l'élément a été analysé. –

Salut les gars, merci pour les pointeurs. J'ai téléchargé l'exemple « preuve de concept » Je travaille avec pour obtenir ce travail ici si vous êtes intéressé: www.simonlast.co.uk/example/04.html semble fonctionner, même si elle Il semble qu'il y ait une interaction inattendue avec la maçonnerie, mais je pense que c'est quelque chose que je peux modifier. Merci pour l'aide, très apprécié. – theothersimon

Ceci va trouver tous les divs sur la page et définir leurs largeurs égales à la largeur de leur élément enfant img.

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

Source

2010-07-07 13:20:45

Assurez-vous simplement d'ajouter une classe aux divs et utilisez-les pour sélectionner les divs. Sinon, cela s'appliquera à tous les divs dans le DOM. –

Vous n'avez pas besoin d'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 la jsFiddle: http://jsfiddle.net/glee/qs8GJ/ à ce qui suit SO question: css - shrink a parent div to fit one child's width and constrain the width of the other child

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

display: table-cell;

la div image ...

display: table-row; 
width: 1px;

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

display: table-cell; 
width: 1px;

Fonctionne comme le charme!

Source

2016-04-17 02:48:17 clayRay

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

Répondre

Questions connexes