Замена элементов
.replaceWith() .replaceAll()
С помощью этих функций можно заменять элементы страницы новыми элементами или уже существующими. Имеется два варианта использования функций:
elements.replaceWith(content), content.replaceAll(elements):jQuery1.2
элементы elements будут заменены содержимым content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, которые будут заменены на это содержимое.
.replaceWith(function):jQuery1.4
выбранные элементы будут заменены на содержимое, заданное html-текстом, который возвратит пользовательская функция. Функция вызывается отдельно, для каждого из выбранных элементов.
Примеры
Допустим страница содержит следующий текст:
<ul class="list l1"> <li class="item i1"> Высоко </li> <li class="item i2"> Быстро </li> <li class="item i3"> Сильно </li> </ul> <ul class="list l2"> <li class="item i1"> Выше </li> <li class="item i2"> Быстрее </li> <li class="item i3"> Сильнее </li> </ul>
следующие два выражения будут равнозначны
$(".i1").replaceWith("<li class='item'>Тест</li>"); $("<li class='item'>Тест</li>").replaceAll($(".i1"));
в обоих случаях элемент списка с текстом "Тест" заменит элементы с классом i1. В результате, текст нашей страницы станет следующим:
<ul class="list l1"> <li class='item'>Тест</li> <li class="item i2"> Быстро </li> <li class="item i3"> Сильно </li> </ul> <ul class="list l2"> <li class='item'>Тест</li> <li class="item i2"> Быстрее </li> <li class="item i3"> Сильнее </li> </ul>
Помимо html-текста, можно заменять одни элементы страницы другими. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код
$(".l2 i2").replaceWith($(".l1 i1"));
изменит первоначальную страницу следующим образом:
<ul class="list l1"> <li class="item i2"> Быстро </li> <li class="item i3"> Сильно </li> </ul> <ul class="list l2"> <li class="item i1"> Выше </li> <li class="item i1"> Высоко </li> <li class="item i3"> Сильнее </li> </ul>
Рассмотрим пример с использованием пользовательской функции. Добавим драматичности элементам из второго списка:
$(".l2 .item").replaceWith(function(){ return ' <li class="item" > '+$(this).text()+', я кому сказал! </li>'; });
в итоге, текст первоначальной страницы станет следующим:
<ul class="list l1"> <li class="item i1"> Высоко </li> <li class="item i2"> Быстро </li> <li class="item i3"> Сильно </li> </ul> <ul class="list l2"> <li class="item"> Выше, я кому сказал! </li> <li class="item"> Быстрее, я кому сказал! </li> <li class="item"> Сильнее, я кому сказал! </li> </ul>