2012-06-20 10 views
14

Jestem ciekawy, dlaczego jQuery's .after() nie owija w łańcuch, ani nie "zapewnia", nowego elementu, który z nim tworzysz. Wydaje mi się, że tak powinno być, ale nie jestem ekspertem i miałem nadzieję, że ktoś może rzucić trochę światła na to, dlaczego to zły pomysł. Oto przykład, aby zobaczyć, co chciałbym od .Po():Dlaczego jQuery .after() nie łączy nowego elementu?

Oto niektóre znaczniki:

<div id="content1"> 
    <p id="hello1">Hello</p> 
</div> 
<div id="content2"> 
    <p id="hello2">Hello</p> 
</div> 

Oto, co chcę, ale to zastępuje „Hello” z „World!”:

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

ta spełnia swoje zadanie, ale na pewno jest brzydki:

$('#hello2').after('<p />'); 
var $newParagraph = $('#content2 p').last(); 
$newParagraph.text('World'); 

jest ładniejszy, ale nie jestem całkowicie sprzedawane: (może ja shoul d być?)

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

Uwaga ta jest oczywiście uproszczony przykład, czyli "<p> Świat! </p > "nie to, co chcę dodać jest moim prawdziwym problemem świata jest bardziej skomplikowana niż to.

Dzięki za wszelkie myśli.

+0

jaki jest twój oczekiwany wynik? –

+0

Ok, czy ktoś wie najlepszy sposób na dodanie elementu przez after()? – Tim

Odpowiedz

20

Przypuszczalnie .after() prace jak to robi, co pozwala na łańcuchu metod, które miałyby zastosowanie do pierwotnie wybranego elementu (-ów):

$('#hello1').after($('<p />').text('World')) 
      .before($('<p />').text('Before text')) 
      .remove(); 

Dzięki temu zachowanie spójnego z innymi metodami, więc nie musicie spróbować zapamiętać, które zwracają oryginalny obiekt i które zwracają jakiś inny obiekt.

Należy pamiętać, że w przypadku $('#hello1') wybiera dokładnie jeden element od zaznaczania przez ID, ale można zastosować .after() do obiektu jQuery zawierającym wiele elementów, aby dodać (sklonowanego) treść po wielu elementów:

$('div.someclass').after($('<p/>').text('whatever')); 

W tym przypadku moim zdaniem zdecydowanie ma sens zachowanie kontekstu łączenia jako oryginalnego obiektu jQuery.

.insertAfter() method może być bliżej do tego, co chcesz:

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

(zwraca również jQuery obiekt został zastosowany, ale robi wkładkę „do tyłu”).

Mogłabyś napisz własną metodę wtyczki, aby zwrócić dodawany element, ale byłoby to mylące, ponieważ działałoby to w przeciwieństwie do wszystkich standardowych metod.

+0

Tak, jestem sprzedany, tylko jedna z tych zabawnych rzeczy, które można spotkać. Dzięki :) – Bung

+1

nie trzeba owijać '# hello1' w przykładzie' .insertAfter'. – Alnitak

+0

Dobry punkt @Alnitak - odpowiedź zaktualizowana. – nnnnnn

3

To właśnie, jak to jest w przypadku większości metod jQuery. Lepiej dla jQuery . być spójne i powrócić oryginalnego obiektu

Rozwiązaniem jest taka:

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

lub:

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

lub nawet:

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

Ten ostatni może faktycznie być korzystne, gdyż ma wówczas kontynuować łańcucha z nowej <p> elementu.

+0

Dzięki, ma sens, wybrałem drugą odpowiedź, ponieważ jest to bardziej gadatliwy, ale to jest to samo. – Bung

+0

@Bung upvotes na dobre odpowiedzi są nadal doceniane ... – Alnitak

0

Nie zapewnia on utworzonego elementu, ponieważ nie zawsze tworzy się element, wymagałoby znacznej ilości mocy obliczeniowej dla JQuery w celu wykrycia, że ​​element jest tworzony i ma sens niech zwróci element, który był celem operacji.

Powiązane problemy