Обертка картинок на странице

JQuery, обертка картинок

Приветствую тебя, читатель.

Недавно в связи с кризисом очередное место работы накрылось медным тазом и пришлось вспомнить что такое собеседования и тестовые задания. Обычно в тестовых заданиях всякая мура, не имеющая к практике никакого отношения, обычные каверзные моменты. Типа какая разница между $i++ и ++$i.

Но вот в одном задании из web-студии называть которую не буду, ибо за рекламу они мне не платят, попалось такое:


1) HTML код, который выводится в тэге DIV с id=”content” это то, что веб-мастер вводит через WYSIWYG. Картинки вставляются обычным тэгом IMG.
Необходимо написать код, который будет выполняться при загрузке страницы и обрамлять каждую картинку тэгом DIV с атрибутами class=”imageStyle” и style=”width:#N#px;” (где #N# - значение атрибута width картинки + 4), а сразу под картинку вставлять тэг P и вписывать в него содержимое атрибута alt картинки. То есть должно получиться что-то вроде:

Можно использовать jQuery.
</div>
<p>some text...</p>
<img src=”img.png” width=”290” height=”100” alt=”some text...” />
<div class=”imageStyle” style=”width:294px;”>

Т.е. в тестовом задании реально полезная штука. Обычно же контент-менеджеру трудно объяснить что нужно проставить определенный блок вокруг картинки, заполнить свойства и т.д.. А здесь из стандартного тега картинки, которая может быть вставлена в редактор, и заполненных опять же в редакторе полей на выходе получаем красивую "обертку". Причем в задании тут указано что нужно еще style забить, но это мне видится лишним, т.к. стили надо писать в css а не в коде. В остальном идея очень неплоха.

Что в итоге у меня получилось:

  1. jQuery(document).ready(function($){
  2. var $rootElement = $('div#content');
  3. var divwidth = 0;
  4. $rootElement.find("img").each(function(indx, element){
  5. divwidth = Number($(element).attr("width"))+4;
  6. $(element).wrap('<div class="imageStyle" style="width:'
  7. +divwidth+'px;"></div>');
  8. $(element).after('<p>'+$(element).attr("alt")+'</p>');
  9. });
  10. });

В шапке, само собой нужно подключить JQuery. Далее  вешаем обработчик на момент когда DOM полностью загружен. После этого ищем все картинки на странице и обходим каждую при помощи функции each. Обработчик можно переписать под свой конкретный случай, методы используемые здесь не панацея. Пример просто показывает что не обязательно вешать на сайт громоздкие галереи чтобы получить красиво оформленную картинку, можно обойтись более простыми методами. Ну а выбор JQuery избавит Вас от головной боли с кроссбраузерностью решения.