before()

посл. ред. 12.08.2016

Метод before() добавляет указанное содержимое перед каждым элементом выборки (перед открывающим тегом).

Варианты использования

jQ_object.before(HTML-код) => jQuery: Добавляет указанный HTML-код перед каждым элементом выборки.
jQ_object.before(DOM-элемент) => jQuery: Добавляет/перемещает указанный DOM-элемент (элементы) перед каждым элементом выборки.
jQ_object.before(jQuery-объект) => jQuery: Добавляет/перемещает элементы, представленные jQuery-объектом, перед каждым элементом выборки.
jQ_object.before(функция) => jQuery: Добавляет HTML-код, возвращаемый указанной функцией, перед каждым элементом выборки. Данная функция выполняется для каждого элемента выборки отдельно.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся текущее HTML-содержимое элемента. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф</p>
  <p>Параграф</p>
</body>
</html>
 
<script>
$('p')
/* выбор всех параграфов */
  .before(function (index) {
    return '<p>Тема ' + (index + 1) + ': </p>';
  });
/* добавление элементов перед каждым параграфом */
</script>

Тема 1:

Параграф

Тема 2:

Параграф

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф 1</p>
  <p class="par2">Параграф 2</p>
  <p class="par3">Параграф 3</p>
</body>
</html>
 
<script>
$('.par2')
  .before($('.par3'));
/* перемещение 3-го параграфа перед 2-ым */
</script>

Параграф 1

Параграф 3

Параграф 2