jQuery set width of a children img for a parent div [duplicate]

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>

Answer 1

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>