Обертывание элементов

Библиотека Zepto предоставляет компактный и мощный инструмент для манипуляции DOM, и обертывание элементов является одной из ключевых операций при работе с HTML-структурой страницы. Обертывание позволяет динамически изменять и структурировать документ, создавая новые родительские элементы вокруг существующих узлов.

Метод .wrap()

Метод .wrap() используется для оборачивания каждого выбранного элемента в указанный HTML-код или DOM-элемент.

Синтаксис:

$(selector).wrap(html|element|function)
  • html — строка HTML, создающая обертку.
  • element — существующий DOM-элемент или Zepto-объект, который станет контейнером.
  • function — функция, возвращающая обертку для каждого элемента. Функция получает индекс текущего элемента в наборе и сам элемент как аргументы.

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

$('.item').wrap('<div class="wrapper"></div>');

Каждый элемент с классом .item будет обернут в новый <div> с классом wrapper. В результате структура DOM изменится следующим образом:

<div class="wrapper">
    <div class="item">...</div>
</div>

Если обертка задается функцией:

$('.item').wrap(function(index){
    return '<div class="wrapper-' + index + '"></div>';
});

Каждому элементу будет присвоен уникальный класс обертки (wrapper-0, wrapper-1 и так далее).

Метод .wrapAll()

Метод .wrapAll() объединяет все выбранные элементы в один общий контейнер.

Синтаксис:

$(selector).wrapAll(html|element|function)

Пример:

$('.item').wrapAll('<div class="group-wrapper"></div>');

В этом случае все .item элементы окажутся внутри одного общего контейнера group-wrapper:

<div class="group-wrapper">
    <div class="item">...</div>
    <div class="item">...</div>
</div>

Отличие от .wrap() заключается в том, что .wrapAll() создает одну общую обертку, а .wrap() — для каждого элемента отдельную.

Метод .wrapInner()

Метод .wrapInner() оборачивает все внутренние элементы выбранного узла, а не сам элемент.

Синтаксис:

$(selector).wrapInner(html|element|function)

Пример:

$('.container').wrapInner('<div class="inner-wrapper"></div>');

Если .container содержит несколько элементов:

<div class="container">
    <p>Текст</p>
    <span>Еще текст</span>
</div>

После применения .wrapInner() результат будет:

<div class="container">
    <div class="inner-wrapper">
        <p>Текст</p>
        <span>Еще текст</span>
    </div>
</div>

Метод удобен для оборачивания содержимого без изменения самого контейнера.

Особенности работы с функциями

Передавая функцию в качестве аргумента для .wrap(), .wrapAll() или .wrapInner(), можно динамически формировать обертку для каждого элемента:

$('.item').wrap(function(index){
    return '<div class="wrapper-' + (index % 2 ? 'odd' : 'even') + '"></div>';
});

Такой подход позволяет создавать разные обертки в зависимости от позиции элемента или других условий.

Удаление оберток

Для удаления оберток используется метод .unwrap():

Синтаксис:

$(selector).unwrap()

Пример:

$('.item').unwrap();

Удаляет непосредственный родительский элемент для каждого выбранного узла, оставляя сам элемент на месте.

Рекомендации по использованию

  • .wrap() подходит для индивидуальной обертки каждого элемента.
  • .wrapAll() — когда нужно объединить группу элементов в один контейнер.
  • .wrapInner() — для оборачивания содержимого элементов без изменения самих контейнеров.
  • Использование функций позволяет динамически управлять структурой оберток.
  • .unwrap() полезен для обратной операции, чтобы вернуть элементы на исходный уровень DOM.

Эти методы обеспечивают гибкое управление DOM-структурой, позволяя создавать вложенные и динамические элементы без ручного вмешательства в HTML-код.

Оглавление