jQuery set width of a children img for a parent div

Question

I want to set width of a wrapper, so paragraph will be not wider than the image using jQuery. What mistake I made?

$(function(){

$('.wrapper').css({
    width: $(this).children('img').width(),
});

});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
    <img src="http://www.placecage.com/400/200"/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>
<div class="wrapper">
    <img src="http://www.placecage.com/500/500"/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>
<div class="wrapper">
    <img src="http://www.placecage.com/300/300"/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>

Where do you have the element with the `module` class? – Carsten Løvbo Andersen Feb 22 '22 at 12:21 — Carsten Løvbo Andersen, Feb 22 '22 at 12:21
thanks, corrected. Still doesn’t work. – Feb 22 '22 at 12:25 — , Feb 22 '22 at 12:25

score 2 · Answer 1 · answered Feb 22 '22 at 12:28

The issue in your code is that you're updating all the .wrapper elements at the same time, and also this in the css() method will refer to the document, not the .wrapper element.

There is also the additional problem that the images may not have loaded yet so they will have a width of 0 until that time.

To do what you require hook a load event handler to the img elements and set the width of the sibling p element from there:

$(function() {
  $('.wrapper img').on('load', function() {
    $(this).next('p').width($(this).width());
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <img src="http://www.placecage.com/400/200" />
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>
<div class="wrapper">
  <img src="http://www.placecage.com/500/500" />
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>
<div class="wrapper">
  <img src="http://www.placecage.com/300/300" />
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>

Well, it works only until you refresh website. After that cleaning cache is needed. At least on Safari — , Feb 22 '22 at 12:50
found the solution: https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — , Feb 22 '22 at 17:29

jQuery set width of a children img for a parent div

1 Answers1