wrapInner()

посл. ред. 12.08.2016

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

Варианты использования

jQ_object.wrapInner(HTML-код) => jQuery: Вставляет содержимое каждого элемента выборки в указанный HTML-код.
jQ_object.wrapInner(DOM-элемент) => jQuery: Вставляет содержимое каждого элемента выборки в указанный DOM-элемент.
jQ_object.wrapInner(jQuery-объект) => jQuery: Вставляет содержимое каждого элемента выборки в элемент, представленный jQuery-объектом.
jQ_object.wrapInner(функция) => jQuery: Вставляет содержимое каждого элемента выборки в HTML-код, возвращаемый указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    .elem1 {background: red;}
    .elem2 {background: blue;}
  </style>
</head>
<body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</body>
</html>
 
<script>
$('p')
/* выбор всех параграфов */
  .wrapInner(function (index) {
    return '<span class="elem' + (index + 1) + '"></span>';
  });
/* 'обёртывание' содержимого каждого параграфа */
</script>

Параграф 1

Параграф 2