Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Вложение элементов
Все элементы коллекции можно разместить в каком-либо другом элементе. Для вложения элементов предназначены следующие методы:
wrapInner(<Параметр>)
— вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. В качестве параметра может быть указан HTML-элемент, DOM-элемент или объект jQuery. Для примера выделим содержимое всех тегов<div>
:
<div>Текст 1</div>
<div>Текст 2</div>
$('div').wrapInner('<b></b>');
Результат будет выглядеть следующим образом:
<div><b>Текст 1</b></div>
<div><b>Текст 2</b></div>
Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент:
$('div').wrapInner( document.createElement('b') );
Можно также передать элемент, созданный с помощью функции $()
:
$('div').wrapInner( $('<b></b>') );
Допускается указание сразу нескольких вложенных элементов:
$('div').wrapInner('<b><u></u></b>');
Результат будет выглядеть следующим образом:
<div><b><u>Текст 1</u></b></div>
<div><b><u>Текст 2</u></b></div>
В качестве параметра можно также указать ссылку на функцию следующего формата:
function <Название функции>([<Индекс>]) {
// ...
}
Текущий элемент доступен внутри функции через указатель this
. Обратите внимание: указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>
. Функция должна вернуть элемент. Вложим содержимое элементов DIV
в абзац со стилевым классом, содержащим индекс элемента:
$('div').wrapInner( function(i) {
return '<p class="cls' + i + '"></p>';
});
Результат:
<div><p class="cls0">Текст 1</p></div>
<div><p class="cls1">Текст 2</p></div>
wrap(<Параметр>)
— полностью вкладывает каждый элемент коллекции в другой элемент. В качестве параметра может быть указан HTML-элемент, DOM-элемент или объект jQuery. Для примера вложим все абзацы внутрь тега<div>
:
<p>Абзац 1</p>
<p>Абзац 2</p>
$('p').wrap('<div></div>');
Результат выполнения:
<div><p>Абзац 1</p></div>
<div><p>Абзац 2</p></div>
Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент:
$('p').wrap( document.createElement('div') );
Можно также передать элемент, созданный с помощью функции $()
:
$('p').wrap( $('<div></div>') );
Если указать ссылку на существующий элемент, то создается его копия:
<p>Абзац 1</p>
<p>Абзац 2</p>
<div class="container"></div>
$('p').wrap( $('.container') );
Результат:
<div class="container"><p>Абзац 1</p></div>
<div class="container"><p>Абзац 2</p></div>
<div class="container"></div>
Допускается указание сразу нескольких вложенных элементов:
$('p').wrap('<div><div></div></div>');
Результат будет выглядеть следующим образом:
<div><div><p>Абзац 1</p></div></div>
<div><div><p>Абзац 2</p></div></div>
В качестве параметра можно также указать ссылку на функцию следующего формата:
function <Название функции>([<Индекс>]) {
// ...
}
Текущий элемент доступен внутри функции через указатель this
. Обратите внимание: указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>
. Функция должна вернуть элемент. Вложим все абзацы внутрь тега <div>
со стилевым классом, содержащим индекс элемента:
$('p').wrap( function(i) {
return '<div class="cls' + i + '"></div>';
});
Результат:
<div class="cls0"><p>Абзац 1</p></div>
<div class="cls1"><p>Абзац 2</p></div>
Выполнить обратную операцию, удалить родительский элемент, позволяет метод unwrap([<Селектор>])
. Удалим родительский элемент для абзаца с идентификатором p1
:
<div>
<p id="p1">Абзац 1</p>
<p>Абзац 2</p>
</div>
$('#p1').unwrap();
Результат:
<p id="p1">Абзац 1</p>
<p>Абзац 2</p>
wrapAll(<Параметр>)
— собирает все элементы коллекции в одном месте и вкладывает их в другой элемент. В качестве параметра может быть указан HTML-элемент, DOM-элемент или объект jQuery. Пример:
<b>Какой-то текст 1</b>
<p>Текст 1</p>
<b>Какой-то текст 2</b>
<p>Текст 2</p>
<b>Какой-то текст 3</b>
<p>Текст 3</p>
$('p').wrapAll('<div></div>');
Результат будет выглядеть следующим образом.
<b>Какой-то текст 1</b>
<div><p>Текст 1</p><p>Текст 2</p><p>Текст 3</p></div>
<b>Какой-то текст 2</b>
<b>Какой-то текст 3</b>
Как видно из результата все элементы коллекции были перемещены после первого элемента и размещены внутри тега <div>
.
Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент:
$('p').wrapAll( document.createElement('div') );
Можно также передать элемент, созданный с помощью функции $()
:
$('p').wrapAll( $('<div></div>') );
Допускается указание сразу нескольких вложенных элементов:
$('p').wrapAll('<div><div></div></div>');
Результат будет выглядеть следующим образом:
<b>Какой-то текст 1</b>
<div><div><p>Текст 1</p><p>Текст 2</p><p>Текст 3</p></div></div>
<b>Какой-то текст 2</b>
<b>Какой-то текст 3</b>
В качестве параметра можно также указать ссылку на функцию следующего формата:
function <Название функции>() {
// ...
}
Первый элемент коллекции доступен внутри функции через указатель this
. Обратите внимание: указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Функция должна вернуть элемент. Вложим все абзацы внутрь тега <div>
со стилевым классом container
:
$('p').wrapAll( function() {
return '<div class="container"></div>';
});
Результат:
<b>Какой-то текст 1</b>
<div class="container"><p>Текст 1</p><p>Текст 2</p>
<p>Текст 3</p></div>
<b>Какой-то текст 2</b>
<b>Какой-то текст 3</b>
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов