jQuery set width of a children img for a parent div-CodePudding

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 >
    <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 >
    <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 >
    <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>

CodePudding user response：

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 >
  <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 >
  <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 >
  <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>

CodePudding user response：

following @Rory McCrossan function doesn’t work after refresh (because of cache). According to jQuery callback on image load (even when the image is cached) final solution would be:

$(function() {
  $(".wrapper img").one("load", function() {
      $(this).next('p').width($(this).width());
  }).each(function() {
    if(this.complete) {
        //$(this).load();  For jQuery < 3.0 
        $(this).trigger('load'); // For jQuery >= 3.0 
    }
  });
});

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

<div >
  <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 >
  <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 >
  <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>