Манипуляция с элементами в jQuery. Часть 3

Манипуляция с элементами в jQuery

От автора: приветствую вас, друзья. В этой статье мы продолжим знакомиться с методами, позволяющими осуществлять манипуляции с элементами DOM, а именно: добавление, удаление и изменение элементов DOM.

Начнем статью с изучения двух методов: wrap и wrapAll. Данный функции позволяют обернуть выбранный элементы (или элементы) в любой другой элемент. Например, у нас есть некий список ul, который мы хотим обернуть в блок div. Это без проблем может сделать метод wrap:

$('.content ul').wrap('<div class="wrap" style="border: 1px solid red;"></div>');

Манипуляция с элементами в jQuery

А что если у нас несколько списков ul? Давайте посмотрим, как поведет себя метод wrap в этом случае.

Манипуляция с элементами в jQuery

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Как видим, каждый из списков метод wrap завернул в div. Но иногда может потребовать не каждый элемент в отдельности обернуть, а все элементы обернуть в один элемент. Для этого есть метод wrapAll, давайте попробуем использовать его:

$('.content ul').wrapAll('<div class="wrap" style="border: 1px solid red;"></div>');

Манипуляция с элементами в jQuery

Думаю, разница в использовании методов wrap и wrapAll понятна. Иногда может потребоваться обернуть не сам элемент, а его внутренние элементы, т.е. его потомков. Допустим, у нас есть следующий список:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

И мы хотим текст внутри элементов списка обернуть в ссылки. В этом случае можно использовать метод wrapInner в jQuery:

$('.content ul li').wrapInner('<a href="#"></a>');

Манипуляция с элементами в jQuery

И последний метод, с которым мы познакомимся сегодня, это метод clone. Данный метод клонирует, т.е. возвращает копию выбранного элемента. Это может пригодиться в том случае, когда мы хотим дублировать элемент на странице. Например, у нас есть один список, который мы хотим клонировать и вставить в начало блока content. Также мы хотим обернуть клонированный список в блок div с рамкой. Вот как это можно сделать, используя методы jQuery:

$('.content ul').clone().prependTo(".content").wrap('<div style="border: 1px solid red"></div>'); 

Манипуляция с элементами в jQuery

На этом мы завершим текущую статью. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree