jQuery метод .wrapAll() обертывает все элементы (элемент) в наборе, выбранным HTML элементом.
Если Вам необходимо обернуть каждый совпавший элемент, или элементы в наборе, выбранными HTML элементами, то вы можете воспользоваться методом .wrap() .
jQuery синтаксис: Синтаксис 1.2: $(selector ).wrapAll(wrappingElement ) Синтаксис 1.4: $(selector ).wrapAll(function ) До jQuery 3.0, функция некорректо работала и вызывалась для каждого элемента в наборе, она получала индекс элемента в наборе в качестве параметра (по аналогии с методом.wrap()). Добавлен в версии jQuery 1.2 (синтаксис обновлен в 1.4) Значения параметров Пример использования Использование jQuery метода.wrapAll() (обертывание HTML элементом).violetBorder /* устанавливаем сплошную границу фиолетового цвета размером 1 пиксель */ }
$("p ").wrapAll(" "); // обертываем все элементыВ наборе } ); } ); Клик
Обычный абзац
Второй обычный абзац
Третий обычный абзац
.wrapAll()
в наборе элементом с классом .violetBorder .
Аналогичного результата можно достичь при создании DOM элемента:
$("p ").wrapAll(document.createElement ("div "));
Результат нашего примера:
Обратите внимание на то, что вы можете создавать сложную вложенную структуру, обертывая необходимые элементы несколькими HTML элементами:
Использование jQuery метода.wrapAll() (обертывание несколькими HTML элементами)div { border : 1px solid violet ; }
$(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент $("span ").wrapAll(" "); // обертываем все элементы в наборе } ); } ); Клик Обычный spanОбычный абзац
Второй обычный spanВ этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы в документе несколькими HTML элементами. Обратите внимание как сгруппировались элементы , и как при этом изменился поток документа.
Результат нашего примера:
Рассмотрим следующий пример в котором в качестве параметра метода .wrapAll() передадим функцию.
Использование jQuery метода.wrapAll() (функция в качестве параметра)div { border : 1px solid orange ; /* устанавливаем сплошную границу оранжевого цвета размером 1 пиксель */ }
$(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент $("span ").wrapAll(function (){ // обертываем все элементы в наборе $(this ).css("color ", "red "); // устанавливаем первому элементу в наборе цвет текcта красный return " "; // возвращаем значение функции } ); } ); } ); Клик Обычный span Второй обычный span Третий обычный spanВ этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы
Последнее обновление: 1.11.2015
В предыдущем параграфе мы вставляли дочерние элементы в уже существующий элемент. Но также мы можем создать новый элемент и обернуть в него уже существующие. Для этого используется метод wrap() и похожие методы wrapAll() и wrapInner() . Например, нам может потребоваться обернуть некоторые элементы в новый элемент div . Для этого мы и прибегаем к вышеназванным методам.
Метод wrapМетод wrap обертывает элементы выборки тем элементом, которые передается в качестве аргумента в данный метод. Он имеет следующие варианты использования:
wrap("разметка html") : обертывает элементы выборки в элемент, создаваемый из разметки html
wrap(элемент) : обертывает элементы выборки в элемент html, переданный в качестве параметра
wrap("селектор") : обертывает элементы выборки в элемент документа, соответствующий селектору
wrap(jQuery) : обертывает элементы выборки в объект jQuery
wrap(функция) : обертывает элементы выборки в объект, возвращаемый функцией
Пусть у нас есть следующая разметка:
- Java
- C/C++
Обернем список с помощью метода wrap:
$(".langs").wrap("");
- Java
- C/C++
Подобным образом мы можем использовать и другие способы использования метода wrap:
Var header = document.getElementById("header"); $(".langs").wrap(header);
Обратите внимание, что в данном случае список вставляется не в существующий элемент, а просто существующий элемент клонируется, и в эту копию обертывается список.
Метод wrapAllДля обертки всех элементов выборки как единого целого в один элемент используется метод wrapAll . Он имеет похожие варианты использования:
wrapAll("разметка html") : обертывает все элементы выборки в один элемент, создаваемый из разметки html
wrapAll(элемент) : обертывает все элементы выборки в один элемент html, переданный в качестве параметра
wrapAll("селектор") : обертывает все элементы выборки в один элемент, соответствующий селектору
wrapAll(jQuery) : обертывает все элементы выборки в один объект jQuery
Например, имеется следующая разметка:
Java C/C++ PHP
Обернем все эти элементы в один элемент div:
$(".lang").wrapAll("");
После этого разметка будет выглядеть следующим образом:
Java C/C++ PHP
Метод wrapInnerДля обертки содержимого элементов в новый элемент служит метод wrapInner . Он имеет следующие варианты использования:
wrapInner("разметка html") : обертывает содержимое элементов выборки в элемент, создаваемый из разметки html
wrapInner(элемент) : обертывает содержимое элементов выборки в элемент html, переданный в качестве параметра
wrapInner("селектор") : обертывает содержимое элементов выборки в элемент документа, соответствующий селектору
wrapInner(jQuery) : обертывает содержимое элементов выборки в объект jQuery
wrapInner(функция) : обертывает содержимое элементов выборки в объект, возвращаемый функцией
Исходная разметка будет выглядеть так:
- Java
- C/C++
Обернем содержимое элементов списка в теги
$("li.lang").wrapInner("");
Финальная разметка будет выглядеть так:
Манипуляции HTML-элементами позволяют уточнять, расширять обернутый набор элементов путем добавления нового содержимого или удалять элементы из набора. Чтобы манипулировать элементами, их нужно отобрать с помощью селекторов или методов отбора.
Управление набором элементов 1. Добавление содержимого на страницу 1.1. Метод.html()Возвращает HTML-содержимое первого элемента обернутого набора или добавляет HTML-содержимое в каждый элемент набора.
Html() Метод указывается без параметров. Возвращает содержимое первого элемента в соответствующем наборе в виде HTML-разметки. .html(фрагмент разметки) фрагмент разметки — добавляет фрагмент HTML-разметки к содержимому всех элементов соответствующего набора. .html(функция) функция — принимает два аргумента: индекс элемента и текущее содержимое элемента. Возвращаемое значение добавляется в качестве нового содержимого.
1.2. Метод.text()Возвращает объединенное текстовое содержимое всех элементов обернутого набора, включая их потомков или добавляет новое текстовое содержимое.
Text() Метод указывается без параметров. Объединяет путем конкатенации текстовое содержимое всех обернутых элементов и возвращает полученный текст в качестве результата, который можно записать в переменную. .text(строка) строка — устанавливает содержимое параметра как новое текстовое содержимое всех обернутых элементов, при этом старое содержимое удаляется. Если строка содержит угловые скобки, они замещаются эквивалентными HTML-элементами. .text(функция) функция — вызывается для каждого элемента обернутого набора. Функция принимает два аргумента — индекс элемента и текущее содержимое элемента. Возвращаемое значение будет добавлено в качестве нового содержимого.
2. Добавление элементов 2.1. Метод.append()Добавляет содержимое, определенное параметром, в конец каждого элемента обернутого набора, после его содержимого. Новый набор будет содержать первоначальное содержимое и добавленное.
Append(содержимое1, содержимое2) содержимое1 содержимое2 — необязательный параметр, определяет дополнительное содержимое, добавляется один или несколько HTML-элементов, массивов, строк или объектов jQuery. .append(функция) функция
2.2. Метод.appendTo()Метод является аналогом.append() с разницей в том, что функции jQuery передается добавляемый элемент, а не обернутый набор. Добавляет элементы обернутого набора после содержимого элементов, заданных параметром.
AppendTo(элемент, к которому добавляется содержимое)
2.3. Метод.prepend()Работает аналогично с.append() , только новое содержимое добавляется в начало, сразу после открывающегося тега элемента, перед содержимым элемента.
Prepend(содержимое1, содержимое2) содержимое1 — в качестве содержимого добавляется HTML-элемент, массив, строка или объект jQuery. содержимое2 — необязательный параметр, определяет дополнительное содержимое, добавляется один или несколько HTML-элементов, массивов, строк или объектов jQuery. .prepend(функция) функция — вызывается для каждого элемента набора, функции передаются два аргумента — индекс элемента и текущее содержимое элемента. Функция возвращает строку, DOM элемент или объект jQuery. Возвращаемое значение будет использовано в качестве содержимого, дополняющего имеющееся содержимое элемента.
2.4. Метод.prependTo()Метод является аналогом.prepend() с разницей в том, что функции jQuery передается добавляемый элемент, а не обернутый набор. Добавляет элементы обернутого набора в начало содержимого элементов, заданных параметром.
PrependTo(элемент, к которому добавляется содержимое) элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.
2.5. Метод.before()Добавляет HTML-фрагмент или элемент, указанные в параметре метода, в дерево DOM, перед каждым элементом обернутого набора. Функция вызывается для каждого элемента набора, ей передается сам элемент и два аргумента — индекс элемента и текущее содержимое элемента. Возвращаемое значение будет использовано в качестве содержимого, дополняющего имеющееся содержимое элемента.
Before(содержимое1, содержимое2) содержимое1 — в качестве содержимого добавляется HTML-элемент, массив, строка или объект jQuery. содержимое2 — необязательный параметр, определяет дополнительное содержимое, добавляется один или несколько HTML-элементов, массивов, строк или объектов jQuery. .before(функция) функция — в качестве аргумента функции передается индекс элемента в наборе и его текущее значение. Функция возвращает строку, DOM элемент или объект jQuery. Возвращаемое значение будет использовано в качестве добавляемого содержимого. .before(функция) функция
2.6. Метод.insertBefore()Вставляет содержимое, переданное функции jQuery, перед каждым элементом, указанным в качестве аргумента данного метода.
InsertBefore(элемент, к которому добавляется содержимое) элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.
2.7. Метод.after()Добавляет содержимое, указанное в параметре метода, в дерево DOM, после каждого элемента обернутого набора.
After(содержимое1, содержимое2) содержимое1 — в качестве содержимого добавляется HTML-элемент, массив, строка или объект jQuery. содержимое2 — необязательный параметр, определяет дополнительное содержимое, добавляется один или несколько HTML-элементов, массивов, строк или объектов jQuery. .after(функция) функция — в качестве аргумента функции передается индекс элемента в наборе и его текущее содержимое. Функция возвращает строку, DOM элемент или объект jQuery. Возвращаемое значение будет использовано в качестве добавляемого содержимого. .after(функция) функция — в качестве аргумента функции передается индекс элемента в наборе. Функция возвращает строку, DOM элемент или объект jQuery. Возвращаемое значение будет использовано в качестве добавляемого содержимого.
2.8. Метод.insertAfter()Вставляет содержимое, переданное функции jQuery, после каждого элемента, указанного в качестве параметра данного метода.
InsertAfter(элемент, к которому добавляется содержимое) элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.
2.9. Метод.wrap()Метод обертывает элемент или группу элементов HTML-разметкой. Если в наборе содержится несколько элементов, будет обернут каждый из них.
Wrap(элемент-обертка) элемент-обертка — строка, представляющая фрагмент HTML-разметки, селектор, элемент с заданным классом или функция jQuery, которыми будет обернут набор элементов. .wrap(функция обратного вызова) функция обратного вызова
2.10. Метод.wrapAll()Оборачивает все элементы набора как единое целое в указанную HTML-разметку.
WrapAll(элемент-обертка) элемент-обертка — строка, представляющая фрагмент HTML-разметки, селектор, элемент с заданным классом или функция jQuery, которыми будет обернут набор элементов. .wrapAll(функция обратного вызова) функция обратного вызова — вызывается один раз для каждого элемента набора. В качестве аргумента получает индекс элемента в наборе. Внутри функции this ссылается на текущий элемент в наборе. Возвращает элемент DOM, объект JQuery, или HTML-фрагмент, в который будет обернут соответствующий элемент.
2.11. Метод.wrapInner()Оборачивает содержимое элементов набора, включая текстовое содержимое, в указанную HTML-разметку.
WrapInner(элемент-обертка) элемент-обертка — строка, представляющая фрагмент HTML-разметки, селектор, элемент с заданным классом или функция jQuery, которыми будет обернуто содержимое набора элементов. .wrapInner(функция обратного вызова) функция обратного вызова — вызывается один раз для каждого элемента набора. В качестве аргумента получает индекс элемента в наборе. Внутри функции this ссылается на текущий элемент в наборе. Возвращает элемент DOM, объект JQuery, или HTML-фрагмент, в который будет обернуто содержимое соответствующего элемента.
3. Замена и удаление элементов 3.1. Метод.unwrap()Удаляет элемент, обертывающий набор.
Unwrap() Метод вызывается без параметров.
3.2. Метод.detach()Удаляет все элементы обернутого набора из DOM. Сохраняет нетронутыми данные и события, связанные с элементами. Все дочерние элементы также исключаются из DOM. Исключенные элементы и связанные с ними данные позднее можно вернуть в дерево DOM.
Detach(селектор) селектор
3.3. Метод.remove()Полностью удаляет все элементы обернутого набора из DOM. При этом можно удалить несколько элементов с одинаковым классом. Все дочерние элементы также исключаются из DOM. Одновременно с элементами удаляются все данные и события, связанные с ними.
Remove(селектор) селектор — необязательный параметр, уточняет, какие именно элементы подлежат удалению.
3.4. Метод.empty()Удаляет содержимое всех элементов набора, удаляя все содержимое, а также все дочерние элементы, находящиеся внутри него.
Empty() Методу не передаются аргументы.
3.5. Метод.replaceWith()Заменяет каждый элемент в обернутом наборе содержимым, переданным методу в качестве аргумента.
ReplaceWith(новое содержимое) новое содержимое — определяет вставляемое содержимое. Может быть фрагмент HTML-разметки с содержимым или без него, селектор, массив элементов или объект jQuery. .replaceWith(функция) функция — возвращаемое значение заменит каждый элемент обернутого набора.
3.6. Метод.replaceAll()Заменяет каждый элемент, соответствующий переданному методу селектору, обернутым набором элементов. Возвращает обернутый набор, содержащий заместившие элементы. Замещенные элементы удаляются и не могут участвовать в последующих операциях.
ReplaceAll(целевой элемент) целевой элемент — селектор, объект JQuery, HTML-элемент или массив элементов, которые нужно заменить.
3.7. Метод.clone()Создает копии элементов в обернутом наборе. Элементы копируются вместе со вложенными элементами. Полученные копии элементов можно далее присоединить в другое место DOM для дальнейшей обработки.
Clone() логическое значение — указывает, должны ли вместе с элементами копироваться их обработчики событий. Значение по умолчанию false . Если установлено true , то вместе с элементами будут скопированы обработчики событий.
