На сайте изображения с определённым классом динамически обёртываются в контейнеры для задания сложного стиля.
Допустим, есть два изображения:
<img src="#" class="stylish" style="float: right; margin-left: 20px"/>
<img src="#" class="stylish" style="float: left; margin-right: 40px"/>
Есть скрипт jQuery, который их обрабатывает:
(function($){
$(document).ready(function() {
// Картинки Stylish
$('img.stylish')
.wrap('<div class="stylish-image"></div>')
.before('<div class="stylish-border"></div>');
$('img.stylish')
.removeAttr('class')
.removeAttr('style');
});
})(jQuery);
В результате каждое изображение имеет следующий вид:
<div class="stylish-image">
<div class="stylish-border"></div>
<img src="#"/>
</div>
Как модифицировать код, чтобы результат выглядел следующим образом:
<div class="stylish-image" style="float: right; margin-left: 20px">
<div class="stylish-border"></div>
<img src="#"/>
</div>
<div class="stylish-image" style="float: left; margin-right: 40px">
<div class="stylish-border"></div>
<img src="#"/>
</div>