Quiero establecer el ancho de un envoltorio, por lo que el párrafo no será más ancho que la imagen usando jQuery. ¿Qué error cometí?
$(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>El problema en su código es que está actualizando todos los elementos .wrapper al mismo tiempo, y también this en el método css() se referirá al document , no al elemento .wrapper .
También existe el problema adicional de que es posible que las imágenes aún no se hayan cargado, por lo que tendrán un ancho de 0 hasta ese momento.
Para hacer lo que necesita, conecte un controlador de eventos de load a los elementos img y establezca el ancho del elemento hermano p desde allí:
$(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>