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