1

На сайте изображения с определённым классом динамически обёртываются в контейнеры для задания сложного стиля.

Допустим, есть два изображения:

<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>

1 ответ 1

1

У меня получилось скопировать стиль так:

JS:

(function($){
    $(document).ready(function() {
        $('img.stylish')
            .wrap('<div class="stylish-image"></div>')
        .each( function(index, element ) {
            console.log(element);
            $(element).parent().attr('style', $(element).attr('style'));
            $(element).removeAttr('style');
            $(element).removeAttr('class');
        });
        $('.stylish-image')
            .before('<div class="stylish-border"></div>');
    });
})(jQuery);

https://jsfiddle.net/1LfdqsLz/

Вообще копирование стайла в JQuery старая проблема. Есть решение типа такого ответа на СО, но на мой взгляд оно слишком сложно для вашего случая.

1
  • Немного изменил порядок, но в целом идею позаимствовал. Всё работает. Спасибо. 26 авг 2015 в 12:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.