Найдите ширину изображения ребенка и примените ее к содержанию родителей Div jQuery

Question

у меня есть <img> и немного <p>Внутри <div>.

Я хочу получить ширину ребенка IMG и применить его к ширине родительского DIV, чтобы параграфы текста упали до той же ширины, что и IMG.

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

Фон:Я разрабатываю тему WordPress, которая использует плагин JQUERY Masonry (http://desandro.com/resources/jquery-masonry) У моей темы есть что -то общее с товарной темой (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());
    });
});

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

РЕДАКТИРОВАТЬ 2: Применил коррекцию Джона на функцию .width ().

Answer 2

Это найдет все DOV на странице и установит их ширину, равную ширине их детского элемента IMG.

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

Answer 3

Вам не нужно использовать JavaScript для этого. Если вы помещаете изображение и P в Child Divs, это можно сделать исключительно в CSS, как в решении Криса (вот JSFiddle: http://jsfiddle.net/glee/qs8gj/ к следующему вопросу:CSS - сокращает родительский див, чтобы соответствовать ширине одного ребенка и ограничивает ширину другого ребенка

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

display: table-cell;

Изображение девит ...

display: table-row;
width: 1px;

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

display: table-cell;
width: 1px;

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