Найдите ширину изображения ребенка и примените ее к содержанию родителей Div jQuery
-
02-10-2019 - |
Вопрос
у меня есть <img>
и немного <p>
Внутри <div>
.
Я хочу получить ширину ребенка IMG и применить его к ширине родительского DIV, чтобы параграфы текста упали до той же ширины, что и IMG.
Я хочу иметь возможность сделать это с несколькими итерациями на одной странице.
Фон:Я разрабатываю тему WordPress, которая использует плагин JQUERY Masonry (http://desandro.com/resources/jquery-masonry) У моей темы есть что -то общее с товарной темой (http://suprb.com/apps/gridalicious) но ширина и размеры поста будут продиктоваться шириной изображения и не будут равномерными.
Мой HTML / CSS безупречен, но мой jQuery / JavaScript довольно шаткий - но если я смогу получить несколько указателей, я смогу работать с этим.
Любая помощь по -настоящему оценила.
Решение
Это работает отлично. Обратите внимание, что вам нужно использовать $ (window) .load () вместо $ (document) .ready (), потому что $ (document). Ready () Пожары до того, как изображения фактически загружаются, и, таким образом, изображения не будут иметь ширины.
$(window).load(function() {
$('div').each(function() {
$(this).width($(this).find('img').width());
});
});
Редактировать: Обратите внимание, что это основывает ширину от первый Изображение в Div. Просто измените индекс ([0]), чтобы основать его с другого изображения в Div.
РЕДАКТИРОВАТЬ 2: Применил коррекцию Джона на функцию .width ().
Другие советы
Это найдет все DOV на странице и установит их ширину, равную ширине их детского элемента IMG.
$('.divselector').attr('width', $(this).find('img').attr('width'))
Вам не нужно использовать 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;
Работает как очарование!