.before( содержание )
Возвращает: jQuery
Описание: Вставляет содержимое, заданное параметром, перед каждым элементом в наборе соответствующих элементов.
.before( содержание )
Добавлена в версию: 1.0
Элемент, строка HTML, или объект jQuery для добавления перед каждым элементом в наборе соответствующих элементов.
.before( function(индекс) )
Добавлена в версию: 1.4
function(индекс)
Функция, которая возвращает строку HTML для вставления перед каждым элементом в наборе соответствующих элементов.
Методы .before() и .insertBefore() выполняют теже задачи. Основное отличие заключается в синтаксисе, в расположении содержания и цели. С .before(), выражение выбора предшествующее методу это контейнер, перед которым содержание будет внесенно.
С .insertBefore(), с другой стороны, содержание предшествует методу, как и селектор выражения, разметка создается на лету, и оно вставляется перед целевым контейнером.
Рассмотрим следующий HTML:
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Мы можем создать содержимое и вставить его перед несколькими элементами одновременно:
$('.inner').before('<p>Test</p>');
Каждый элемент <div class="inner"> получит своё новое содержание:
<div class="container"> <h2>Greetings</h2> <p>Test</p> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> </div>
Мы также можем выбрать элемент на странице и вставить его перед другим элементом:
$('.container').before($('h2'));
Если выбранный элемент таким образом вставить в другие места, он будет перемещен перед элементом цели (не клонирован):
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.
Начиная с jQuery 1.4, .before() и .after() будет также работать на разъединенные узлы DOM:
$("<div/>").before("<p></p>");
Результатом является набор jQuery, включающий параграф и div (в порядке убывания).
Примеры
Пример 1
Контент, который необходимо вставить перед элементом.$("p").before("<b>Hello</b>");
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").before("<b>Hello</b>"); }); </script> <style>p { background:yellow; }</style> </head> <body> <p> is what I said...</p> </body> </html>
Пример 2
Вставляет элемент DOM перед всеми параграфами на странице.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").before( document.createTextNode("Hello") ); }); </script> <style>p { background:yellow; }</style> </head> <body> <p> is what I said...</p> </body> </html>
Пример 3
Вставляет объект jQuery (аналогично массиву элементов DOM) перед всеми параграфами на странице.Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").before( $("b") ); }); </script> <style>p { background:yellow; }</style> </head> <body> <p> is what I said...</p><b>Hello</b> </body> </html>
Была ли эта информация полезной?
