Вставка контента перед содержимым выбранного объекта. Метод before() в jQuery


Метод before() в jQuery позволяет вставить определенный контент или объекты перед содержимым каждого из множества указанных объектов.
Синтаксис метода прост:

1

.before(content, [content])

Вторая вариация:

1

.before(function)

Параметр content — это строка, HTML-код, jQuery-объект или какой-то DOM-элемент. Во втором случае в качестве параметра передается функция, которая должна вернуть то, что необходимо вставить.

Рассмотрим простой пример. Допустим, у нас есть такой HTML-код:

1
2
3
4
5

 <div class="wrapper">
  <h2>Привет!</h2>
  <div class="test">Один</div>
  <div class="test">Два</div>
</div>

Теперь мы хотим вставить перед блоками div с классом test другой элемент div. Делаем это с помощью метода before():

1

$( ".test" ).before( "<div>Нет значения</div>" );

В результате мы получим такой HTML-код:

1
2
3
4
5
6

<div class="wrapper">
  <h2>Привет!</h2>
    <div>Нет значения</div>
    <div class="test">Один</div>
    <div class="test">Два</div>
</div>

Как видно из синтаксиса, метод before() может принимать несколько параметров:

1

$( ".test" ).before( "<div>Пустой блок</div>", "<div>Нет значения</div>" );

Однако, использовать такой вариант рекомендуется как можно реже, поскольку определить сразу, какой результат будет получен не так просто:

1
2
3
4
5
6
7
8
9
10

<div class="wrapper">
  <h2>Привет!</h2>
    <div>Нет значения</div>
    <div>Пустой блок</div>
    <div>Нет значения</div>
    <div class="test">Один</div>
    <div>Пустой блок</div>
    <div>Нет значения</div>
<div class="test">Два</div>
</div>

Также можно вставлять уже имеющийся элемент на странице перед другим элементом:

1

$( "div.test" ).before( $( "h1" ) );
Другие посты

Категория: jQuery

Оставить комментарий


Яндекс.Метрика