Функции wrap(), unwrap().

Есть в библиотеке jQuery много полезных и нужных функций для простого и быстрого добавления, удаления, изменения HTML-кодов на страницах Вашего сайта. Такие как next(), append(), prepend(), before(), after(), html(), attr(), remove(), replaceWith().

В этот ряд нужных функций можно прибавить функции wrap(), unwrap().

Функция wrap() заключает каждый элемент выборки на странице сайта в пару HTML-тегов.

Например, имеется абзац p:

                    < p>какой-то абзац p< /p>

Тогда после связывания нашей функции wrap() с абзацом p в виде $('p').wrap('< div>< /div>')получаем следующее выражение:

                    < div>
                    < p>какой-то абзац p< /p>
                    < /div>

Для того чтобы убрать родительский тег у абзаца p Вы должны будете написать следующий код с функцией unwrap():

                    $('p').unwrap()

Как Вы видите, для того чтобы убрать родительский тег не требуется в функции unwrap() указывать значение аргумента.

Рассмотрим более сложный случай для использования функции wrap(). Предположим. У Вас вдруг возникло желание сделать необычные подписи под изображениями на странице сайта.

Сначала Вы выбираете нужные изображения с каким-то классом или наоборот все изображения, находящиеся на странице сайта. Можно выбрать изображения, находящиеся в отдельной папке вне страницы сайта, конечно, для этого Вы должны обратиться к данной папке по абсолютному адресу папки. Потом заключаете изображения в тег < div> c классом izo. Далее в этот тег class="izo" добавляете теги абзаца p с переменной caption. Немного измените по своему вкусу теги div и p с помощью таблиц стилей CSS, то есть применяя функцию css() к этим классам izo( проделайте это самостоятельно - не сложная процедура связывания функции css(), где аргументами будут стили элементов).

Вот, алгоритм действий для такого задания:

                    $('img').each(funtion() {
                    // сохранение ссылки на текущее изображение
                    var $this=$(this);
                    // получения свойства alt для подписи
                    var caption=$this.attr('alt');
                    // добавление HTML-тега
                    $this.wrap('< div class="izo">< /div>')
                    .after('< p>'+caption+'< /p>');
                    }); // конец функции each().

Объект $('img') выбирает все изображения на странице сайта.

Далее при помощи функции each(), где аргументом этой функции является анонимная функция обходим все изображения в цикле шаг за шагом. В переменной $this текущее изображение сохраняется в каждом шаге цикла. В переменной caption сохраняется значение атрибута alt. Код программы $this.wrap('< div class="izo">< /div>').after('< p>'+caption+'< /p>'); каждое найденное изображение заключает в блок с классом izo и после этого добавляет в данный блок абзац p со значением alt данного изображения, то есть подписывает это изображение.

Далее Вы легко можете добавлять другие функции для изменения стилей блока и подписи изображений.

Здесь коды программы оформлены через переменные, так правильнее составлять программы. Если хотите написать в одну строку, то, пожалуйста:

                    $('img').each(funtion() {
                    $(this).wrap('< div class="izo">< /div>')
                    .after('< p>'+'$(this).attr("alt")'+'< /p>');
                    }); // конец функции each().
              так писать коды программ не желательно, сложно и запутано, хотя
              получается короче, но будут лишние проблемы.

Функция wrap() заключает элементы выборки в теги, которые Вам необходимы. Функция unwrap(), наоборот, убирает родительский тег.

обратно на главную     назад    дальше     вперед