Почему jQuery .after () не связывает новый элемент в цепочку?
Мне любопытно, почему jQuery '.after () не связывает или "не предоставляет вам" & quot; новый элемент, который вы создаете с ним. Мне кажется, что так и должно быть, но я не эксперт и надеялся, что кто-нибудь сможет пролить свет на то, почему это плохая идея. Вот пример того, что я хотел бы получить от .after ():
Вот некоторая разметка:
<div id="content1">
<p id="hello1">Hello</p>
</div>
<div id="content2">
<p id="hello2">Hello</p>
</div>
Вот что я хочу, но это заменяет "Hello" с & quot; Мира! & quot ;:
$('#hello1').after('<p />').text('World!');
Это делает работу, но это ужасно
$('#hello2').after('<p />');
var $newParagraph = $('#content2 p').last();
$newParagraph.text('World');
Это лучше, но я не полностью продан (может быть, мне следует?)
$('#hello1').after( $('<p />').text('World') );
Обратите внимание, что это, очевидно, упрощенный пример, то есть & lt; p & gt; World! & Lt; / p & gt; " это не то, что я хочу добавить, моя проблема в реальном мире более сложна, чем эта.
Спасибо за любые мысли.
Ответы на вопрос(3)
.after() работает так, как это позволяет вам связать больше методов, которые будут применяться к первоначально выбранному элементу (ам):
$('#hello1').after( $('<p />').text('World') )
.before( $('<p />').text('Before text') )
.remove();
Это поддерживает поведение в соответствии с другими методами, поэтому вам не нужно пытаться запомнить, какие из них возвращают исходный объект, а какие - какой-то другой объект.
Обратите внимание, что в вашем случае$('#hello1') выбирает ровно один элемент, так как вы выбираете по id, но вы можете применить.after() к объекту jQuery, содержащему много элементов, чтобы добавить (клонировать) контент после нескольких элементов:
$('div.someclass').after( $('<p/>').text('whatever') );
В этом случае, на мой взгляд, определенно имеет смысл сохранить цепочечный контекст как исходный объект jQuery.
.insertAfter() method может быть ближе к тому, что вы хотите:
$('<p/>').insertAfter('#hello1').text('World');
(Он также возвращает объект jQuery, к которому он был применен, но делает вставку в «reverse».)
Вы можете написать свой собственный метод плагина для возврата добавляемого элемента, но это может сбить с толку, так как он будет работать напротив всех стандартных методов.
#hello1 в.insertAfter пример.чтобы jQuery был согласованным и возвращал исходный объект.
Исправление таково:
$('#hello1').after(
$('<p/>', { text: 'World!' })
);
или же:
$('#hello1').after(
$('<p/>').text('World!')
);
или даже:
$('<p/>').text('World!').insertAfter('#hello1');
Последний может на самом деле быть предпочтительным, так как он затем продолжает цепочку от нового<p> элемент.