Вложение элементов

Все элементы коллекции можно разместить в каком-либо другом элементе. Для вложения элементов предназначены следующие методы:

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

Учебник по jQuery и AJAX в формате PDF