Добавление содержимого после элементов
Функции вставляют заданное содержимое сразу после определенных элементов страницы. Имеется два варианта использования функций:
Примеры
Допустим страница содержит следующий текст:
<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>
Помимо 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>
См. также
- Добавление содержимого в начало элементов
- Добавление содержимого в конец элементов
- Добавление содержимого перед заданными элементами