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

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

1 голос
/ 07 июля 2010

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

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 07 июля 2010

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

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

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

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

1 голос
/ 07 июля 2010

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

 $('.divselector').attr('width', $(this).find('img').attr('width'))
0 голосов
/ 17 апреля 2016

Вам не нужно использовать Javascript вообще для этого. Если вы поместите изображение и символ p в дочерние элементы div, это можно сделать исключительно в CSS, как в решении Криса (вот JSFiddle: http://jsfiddle.net/glee/qs8GJ/ на следующий вопрос SO: css - уменьшить родительский div, чтобы он соответствовал ширине одного дочернего элемента и ограничить ширину другого дочернего элемента

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

display: table-cell;

изображение div в ... 

display: table-row;
width: 1px;

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

display: table-cell;
width: 1px;

Работает как шарм!

...