1 Topic by PunBB

Topic: jQuery: как вставить html после элемента

Добавление содержимого после элементов

.after()  .insertAfter()

Функции вставляют заданное содержимое сразу после определенных элементов страницы. Имеется два варианта использования функций:

elements.after(content), content.insertAfter(elements):jQueryv:1.0

сразу после элементов elements будет добавлено содержимое content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, после которых это содержимое должно быть вставлено.

.after(function(index)):jQueryv:1.4

после выбранных элементов будет добавлен html-текст, который будет возвращен пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передается один параметр: index — позиция элемента в наборе.

2 Reply by PunBB

Re: jQuery: как вставить html после элемента

Примеры вставки html в конце элемента

Допустим страница содержит следующий текст:

 <ul class="list l1">
   <li class="item it1"> Высоко </li>   
   <li class="item it2"> Быстро </li>   
   <li class="item it3"> Сильно </li>   
 </ul>
 <ul class="list l2">
   <li class="item it1"> Выше </li>   
   <li class="item it2"> Быстрее </li>   
   <li class="item it3"> Сильнее </li>   
 </ul>

следующие два выражения будут равнозначны

 $(".it1").after("<li class='item'>Тест</li>");
 
 $("<li class='item'>Тест</li>").insertAfter($(".it1"));

в обоих случаях элемент списка с текстом "Тест" будет добавлен после элементов с классом it1. В результате, текст нашей страницы станет следующим:

 <ul class="list l1">
   <li class="item it1"> Высоко </li>   
   <li class="item"> Тест </li>
   <li class="item it2"> Быстро </li>   
   <li class="item it3"> Сильно </li>   
 </ul>
 <ul class="list l2">
   <li class="item it1"> Выше </li>   
   <li class="item"> Тест </li>
   <li class="item it2"> Быстрее </li>   
   <li class="item it3"> Сильнее </li>   
 </ul>

3 Reply by PunBB

Re: jQuery: как вставить html после элемента

Помимо html-текста, можно вставлять jQuery объекты. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код

 $(".l2 .it2").after($(".l1 li:last"));

переместит элемент li из первого списка, во второй, вставив его там после элемента с классом it2:

 <ul class="list l1">
   <li class="item it1"> Высоко </li>   
   <li class="item it2"> Быстро </li>   
 </ul>
 <ul class="list l2">
   <li class="item it1"> Выше </li>   
   <li class="item it2"> Быстрее </li>   
   <li class="item it3"> Сильно </li>   
   <li class="item it3"> Сильнее </li>   
 </ul>

Рассмотрим пример с использованием пользовательской функции. Добавим новый элемент списка после элемента со словом "Быстро":

  $('.item').after(function(indx){
    if($(this).text() == " Быстро ")
       return '<li class="item"> Незванный элемент О_О </li>';
    else
       return '';
  });

в итоге, текст первоначальной страницы станет следующим:

 <ul class="list l1">
   <li class="item it1"> Высоко </li>   
   <li class="item it2"> Быстро </li>
   <li class="item"> Незванный элемент О_О </li>
   <li class="item it3"> Сильно </li>   
 </ul>
 <ul class="list l2">
   <li class="item it1"> Выше </li>   
   <li class="item it2"> Быстрее </li>   
   <li class="item it3"> Сильнее </li>   
 </ul>