Вопрос по jquery, jquery-after, javascript, html – Почему jQuery .after () не связывает новый элемент в цепочку?

15

Мне любопытно, почему 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; " это не то, что я хочу добавить, моя проблема в реальном мире более сложна, чем эта.

Спасибо за любые мысли.

Итак, кто-нибудь знает лучший способ получить элемент, который вы добавляете через after ()? Tim
каков ваш ожидаемый результат? Ravinder Singh

Ваш Ответ

3   ответа
21

.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».)

Вы можете написать свой собственный метод плагина для возврата добавляемого элемента, но это может сбить с толку, так как он будет работать напротив всех стандартных методов.

Да, я продан, только одна из тех забавных вещей, с которыми можно столкнуться. Спасибо :) Bung
+1 для вставки после, именно то что мне нужно
Хороший вопрос @Alnitak - ответ обновлен.
не нужно оборачивать#hello1 в.insertAfter пример.
3

чтобы jQuery был согласованным и возвращал исходный объект.

Исправление таково:

$('#hello1').after(
    $('<p/>', { text: 'World!' })
);

или же:

$('#hello1').after(
    $('<p/>').text('World!')
);

или даже:

$('<p/>').text('World!').insertAfter('#hello1');

Последний может на самом деле быть предпочтительным, так как он затем продолжает цепочку от нового<p> элемент.

@ Хорошие отзывы за хорошие ответы все еще ценятся ...
Спасибо, имеет смысл, я выбрал другой ответ, потому что он более многословный, но это то же самое. Bung
0

потому что вы не всегда создаете элемент, для JQuery потребуется значительное количество вычислительной мощности, чтобы обнаружить, что элемент создан, и имеет гораздо больше смысла, чтобы он всегда возвращал стихия ведьмы была целью операции.

Похожие вопросы