Soru jQuery: after () ve insertAfter () arasındaki fark nedir


jQuery bir vardır .after() yöntem ve ayrıca .insertAfter() yöntem.

Aralarındaki fark nedir? Sanırım kullanabilirim .after() Seçilen bir elemandan (veya elemanlardan) sonra elemanlar eklemek. Bu doğru mu? ne var .insertAfter() için?


44
2017-12-15 15:34


Menşei




Cevaplar:


Onlar karşılıklı zıtlardır.

'sonra'seçiciden sonra argümanı ekler.

'InsertAfter'seçiciyi argümandan sonra ekler.

İşte aynı şeyle yapılan bir örnek:

InsertAfter ():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertAfter( ".inner" );
Each inner <div> element gets this new content:
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

sonra():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

69
2017-12-15 15:39



Büyük bir fark "dönüş" değeridir. Çağrılan işlevi, döndürülen örnek - Casebash
Bu yüzden, 'zıt' kelimesini kullandığın için çok memnun oldum :-) - Simon_Weaver
@ user10089632 - Önerilen düzenlemenizi gördüm ve onayladım. Ama gerçekten kendi cevabı olarak yanlız durmalıdır. Bu da dahil olmak üzere diğer cevaplardan çok daha açık ve bir cevap olarak sunarak, itibar alacaksınız. İnşallah zamanla, cevabınız bundan daha fazla tavır alırdı. - Scott Mermelstein


Onlar birbirinin tersidir. JQuery'de açıklandığı gibi belgeleme:

Bu:

$("p").insertAfter("#foo");

Aynı şununla aynı:

$("#foo").after("p");

Ve son olarak, insertAfter eklenen tüm öğeleri döndürürken, .after () çağrılan içeriği döndürür.


23
2017-12-15 15:41



Yanlış, after() Yukarıdaki örnekte çağrılan içeriği döndürür $("#foo").after("p") dönecekti $("#foo") Daha fazla zincirleme komutlarına izin vermek. - Timothy Walters
dönüş değeri bahşiş için teşekkürler, çok yardımcı oldu. - Wesam Alalem


Şimdiye kadarki cevapların tümü çamur gibi açık ;-) (Ben de ona bir bıçak takacağım!)

Bu Html ile başlıyorsanız:

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

Sonra biraz ekler yeni eşleşen etiketlerden sonra içerik:

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

Son sonuç:

<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

Diğer yandan, InsertAfter bir veya daha fazla öğe taşır DOM'da zaten var olan seçilen elemanlardan sonra (Gerçekten, bu yöntem çağrılabilir MoveAfter


15
2017-12-15 15:50



Yeniden adlandırmak için +1 after ve insertAfter - Yukulélé
-1 yanlış olduğu için. Her iki yöntem, sadece tek bir hedef eleman varsa, ya da birden fazla hedef eleman varsa klonlar oluşturursa öğeyi hareket ettirir. - Timothy Walters


(önce ve sonra):

$('selector').after('new_content');
$('selector').before('new_content');

while (insertAfter & insertBefore):

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

11
2017-07-14 21:01





$("p").insertAfter("#foo");

==

$("#foo").after("p")

4
2017-12-15 15:40





Kontrol edin belgeleme:

$("#foo").after("p")

aynıdır:

$("p").insertAfter("#foo");

2
2017-12-15 15:41





sonra (içerik) İadeler: jQuery

Eşleşen öğelerin her birini sonra içerik ekleyin.

insertAfter (selector) İade: jQuery

Eşleşen öğelerin tümünü, belirtilen başka bir öğe grubundan sonra ekleyin.


1
2017-12-15 15:40





Ayrıca, eklenen öğenin geçirme özniteliklerinin ".insertAfter" ile çalışmadığı, ancak ".after" ile çalıştığı görülmektedir.

Eserleri:

$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

çalışmıyor:

$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

* düzenleme: ".after" ile çalışmadığı görülüyor, ancak ".appendTo" ile


0
2018-04-03 16:55