Замена элементов

Материал из JQuery

Перейти к: навигация, поиск
.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>

Ссылки

Поисковые ключи:
  • замена элемента на странице
  • перемещение элемента на странице
  • .replaceWith()
  • replaceWith()
Поисковые ключи:
  • .replaceAll()
  • replaceAll()