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

Материал из JQuery

Перейти к: навигация, поиск
.prepend()  .prependTo()

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

elements.prepend(content), content.prependTo(elements):jQuery1.0
в начало элементов elements будет добавлен content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, в которые это содержимое должно быть помещено.
.prepend(function(index, value)):jQuery1.4
в начало выбранных элементов будет добавлен html-текст, который будет возвращен пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущий html-содержимое элемента.

Примеры

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

 <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>

См. также

Ссылки

Поисковые ключи:
  • поместить содержимое в начало элемента
  • вставить содержимое в начало элемента
  • добавить содержимое в начало элемента
  • .prepend()
  • prepend()
Поисковые ключи:
  • .prependTo()
  • prependTo()