Добавление содержимого в начало элементов
Функции добавляют содержимое в начало определенных элементов. Имеется два варианта использования функций:
Примеры
Допустим страница содержит следующий текст:
<ul class="list l1"> <li class="item"> Высоко </li> <li class="item"> Быстро </li> <li class="item"> Сильно </li> </ul> <ul class="list l2"> <li class="item"> Выше </li> <li class="item"> Быстрее </li> <li class="item"> Сильнее </li> </ul>
следующие два выражения будут равнозначны
$(".list").prepend("<li class='item'> Тест </li>"); $("<li class='item'> Тест </li>").prependTo($(".list"));
в обоих случаях элемент списка с текстом "Тест" будет добавлен в начало элементов с классом list. В результате, текст нашей страницы станет следующим:
<ul class="list l1"> <li class="item"> Тест </li> <li class="item"> Высоко </li> <li class="item"> Быстро </li> <li class="item"> Сильно </li> </ul> <ul class="list l2"> <li class="item"> Тест </li> <li class="item"> Выше </li> <li class="item"> Быстрее </li> <li class="item"> Сильнее </li> </ul>
Помимо html-текста, можно вставлять jQuery объекты. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код
$(".l2").prepend($(".l1 li:last"));
переместит элемент li из первого списка, в начало второго:
<ul class="list l1"> <li class="item"> Высоко </li> <li class="item"> Быстро </li> </ul> <ul class="list l2"> <li class="item"> Сильно </li> <li class="item"> Выше </li> <li class="item"> Быстрее </li> <li class="item"> Сильнее </li> </ul>
Рассмотрим пример с использованием пользовательской функции. Добавим новый элемент списка только в список, который содержит элемент со словом "Быстрее":
$(".list").prepend( function(indx, val){ if($('<ul>'+val+'</ul>').find(".item:contains('Быстрее')").length != 0) return '<li class="item"> Новый элемент </li>'; else return ""; });
в итоге, текст первоначальной страницы станет следующим:
<ul class="list l1"> <li class="item"> Высоко </li> <li class="item"> Быстро </li> <li class="item"> Сильно </li> </ul> <ul class="list l2"> <li class="item"> Новый элемент </li> <li class="item"> Выше </li> <li class="item"> Быстрее </li> <li class="item"> Сильнее </li> </ul>
См. также
- Добавление содержимого в конец элементов
- Добавление содержимого после заданных элементов
- Добавление содержимого перед заданными элементами