jQuery метод .replaceAll()

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

jQuery метод .replaceAll() позволяет заменить каждый целевой элемент набором соответствующих элементов.

jQuery синтаксис:

Синтаксис 1.2

JavaScript
$( content ).replaceAll( target )

content - Selector (строка), или Element (DOM), или jQuery (объект)

target - Selector (строка), или Element (DOM), или jQuery (объект), или Array

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

1.2

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

Параметр Описание
content Содержимое, которое будет вставлено взамен каждого целевого элемента.
target Строка селектора, объект jQuery, DOM элемент, или набор элементов, которые будут заменены.

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

Пример использования jQuery метода .replaceAll()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button>Клик</button>
<p>Первый параграф</p>
<p>Второй параграф</p>
<p>Третий параграф</p>
<hr />
<div class="first">Первый блок</div>
<div class="second">Второй блок</div>
<div class="third">Третий блок</div>
<hr />
<a href="#">1</a><a href="#">2</a><a href="#">3</a>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $('<h3>Replaced</h3>').replaceAll('p')
        $('.third').replaceAll('.first')

        var a = $('a:first')
        var b = $('a:last')
        $('<i>replaced</i>').replaceAll([a, b])
    })
})

В этом примере мы с использованием jQuery метода .replaceAll():

  • Заменяем каждый целевой элемент <p> новым содержимым (заголовок третьего уровня <h3>).
  • Заменяем каждый целевой элемент с классом first элементом с классом third. Обратите внимание, что в этом случае элемент с классом first вырезается из своей позиции и вставляется вместо элемента с классом third.
  • Инициализируем переменные, содержащие первый и последний элемент <a> в документе, передаем эти переменные в массиве методу .replaceAll() и заменяем их новым содержимым