найти ширину изображения ребенка и применить его к содержанию родительского div jquery

Question

У меня есть <img> и некоторые <p> внутри <div>.

Я хочу получить ширину дочернего img и применить его к ширине родительского div, чтобы абзацы текста обертывались до той же ширины, что и img.

Я хочу, чтобы иметь возможность сделать это для нескольких итераций на одной странице.

фона: Я разрабатываю тему WordPress, который использует Кладка JQuery плагин (http://desandro.com/resources/jquery-masonry). Моя тема имеет что-то общее с Gridalful theme (http://suprb.com/apps/gridalicious), но ширина и размеры сообщений будут определяться шириной изображения и не будут равномерными.

Мой html/css безупречен, но мой jquery/javascript довольно шаткий - но если я смогу получить некоторые указатели, я должен уметь работать с ним.

Любая помощь действительно ценится.

Answer 1

Это прекрасно работает. Обратите внимание: вам нужно использовать $ (window) .load() вместо $ (document) .ready(), потому что перед загрузкой изображений фактически загружается $ (document) .ready(), и, следовательно, изображения не будут иметь ширины.

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

Edit: Обратите внимание, что это будет базировать ширина прочь первого изображения в DIV. Просто измените индекс ([0]), чтобы сфокусировать его на другом изображении в div.

Редакция 2: Применяемая поправка Джона по функции .width().

Answer 2

Это найдет все div на странице и установит их ширину равной ширине дочернего элемента img.

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

Answer 3

Для этого вам не нужно использовать Javascript. Если поместить изображение и р в дочерних дивы, это может быть сделано исключительно в CSS, как и в решении Криса (вот JSFiddle: http://jsfiddle.net/glee/qs8GJ/ к следующему С.О. вопрос: css - shrink a parent div to fit one child's width and constrain the width of the other child

Хитрость заключается в том, чтобы установить родительский DIV в ...

display: table-cell; 

ДИВ изображение ...

display: table-row; 
width: 1px; 

... и DIV, содержащий текст абзаца

display: table-cell; 
width: 1px; 

Работает как очарование!