Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Функции 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(), наоборот, убирает родительский тег.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

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

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: