jQuery метод .wrapAll()

Определение и применение

jQuery метод .wrapAll() обертывает все элементы (элемент) в наборе, выбранным HTML элементом.

jQuery синтаксис:

Синтаксис 1.2:

JavaScript
$(selector).wrapAll( wrappingElement )

Синтаксис 1.4:

Код
$(selector).wrapAll( function )

До jQuery 3.0, функция некорректо работала и вызывалась для каждого элемента в наборе,

она получала индекс элемента в наборе в качестве параметра (по аналогии с методом .wrap()).

Добавлен в версии jQuery

1.2 (синтаксис обновлен в 1.4)

Значения параметров

Параметр Описание
wrappingElement Параметр определяет, чем будут оборачиваться все элементы (элемент) в наборе. Допустимые значения:
  • HTML элементы.
  • DOM элементы.
  • jQuery объекты.
function Определяет функцию, которая возвращает содержимое HTML, DOM элемент, или jQuery объект, которым будут оборачиваться все элементы (элемент) в наборе. Внутри функции this ссылается на первый элемент в наборе. Функция вызывается однократно для каждого совпавшего элемента.

Пример использования

Метод .wrapAll() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<button>Клик</button>
<p>Обычный абзац</p>
<p>Второй обычный абзац</p>
<p>Третий обычный абзац</p>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('p').wrapAll('<div class="violetBorder"></div>') // обертываем все элементы <p> в наборе
    })
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

.violetBorder {
  border: 1px solid violet; /* устанавливаем сплошную границу фиолетового цвета размером 1 пиксель */
}

В этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы <p> в наборе элементом <div> с классом .violetBorder.

Аналогичного результата можно достичь при создании DOM элемента:

Метод .wrapAll() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<p>Первый абзац</p>
<p>Второй абзац</p>
main.js
JavaScript
$('p').wrapAll(document.createElement('div'))
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}
div {
  border: 2px solid steelblue;
  padding: 12px;
}

Обратите внимание на то, что вы можете создавать сложную вложенную структуру, обертывая необходимые элементы несколькими HTML элементами:

Метод .wrapAll() — пример 3

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<button>Клик</button>
<span>Обычный span</span>
<p>Обычный абзац</p>
<span>Второй обычный span</span>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('span').wrapAll('<div><b><i></i></b></div>') // обертываем все элементы <span> в наборе
    })
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

div {
  border: 1px solid violet; /* устанавливаем сплошную границу оранжевого цвета размером 1 пиксель */
}

В этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы <span> в документе несколькими HTML элементами. Обратите внимание как сгруппировались элементы <span>, и как при этом изменился поток документа.

Рассмотрим следующий пример в котором в качестве параметра метода .wrapAll() передадим функцию.

Метод .wrapAll() — пример 4

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<button>Клик</button>
<span>Обычный span</span>
<span>Второй обычный span</span>
<span>Третий обычный span</span>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('span').wrapAll(function () {
            // обертываем все элементы <span> в наборе
            $(this).css('color', 'red') // устанавливаем первому элементу в наборе цвет текста красный
            return '<div></div>' // возвращаем значение функции
        })
    })
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

div {
  border: 1px solid orange; /* устанавливаем сплошную границу оранжевого цвета размером 1 пиксель */
}

В этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы <span> в документе элементом <div>, который возвращает функция, и при этом первому элементу <span> в наборе мы устанавливаем цвет текста красный.