Başlık biraz açıklayıcı olmasada bu yazımda jQuery ile bir nesnenin öncesine veya sonrasına nesne eklemeyi göreceğiz.Bu metod için jQuery öğrenmeye başladığımda “Nerede işime yarayacak boşver” dediğimi hatırlıyorum.Ancak bir önceki yazımda bahsettiğim haber temasını kodlarken birden bu kodu kullanmak aklıma geldi ve ne işe yaradığını nasıl kullanıldığınıda anlamış oldum sizlere de videolu bir şekilde anlattım.
Ben videoda 4 metodun kullanımını gösterdim ancak yaptığım diğer araştırmalarımda bunlara ek olarak 4 metodun daha olduğunu gördüm..Yazımda onlardanda bahsedeceğim.
Metodlarımız şunlar:
- .append();
- .prepend();
- .after();
- .before();
- .appendTo();
- .prependTo();
- .insertAfter();
- .insertBefore();
Şimdi bunları tek tek açıklayalım.
“.append();” metodu oluşturulan bir nesne’nin içerisine başka bir nesne eklememize yarar.
yazılar şeklinde olan kodumuz olsun ve buna jQuery’de
$(function(){
$("li").append("okunası değerlikte
");
});
Şeklinde yazdırdığımızda bunun kaynak kodu
yazılarokunası değerlikte
şeklinde olur.
.prepend(); metoduda aynı şekilde işlem görür ancak “pre” kelimesinin anlamı “ön” olduğundan işlemi yazının önünde gerçekleştirir.
yazılar şeklinde olan aynı kodu jQuery’de
$(function(){
$("li").prepend("okunası değerlikte
");
});
Şeklinde yazdırdığımızda bunun kaynak kodu
okunası değerlikte
yazılar
şeklinde olur.
.after(); ve .before(); metodlarının işlevleri bunlar ile aynıdır.After sonrasında before ise öncesinde işlem gördürür fakat tek varları var.Bu iki metodda belirtilen nesnenin öncesinde ve sonrasında işlem gördürür.Hemen açıklayayım onu kodlar ile.Aynı yapımızı oluşturuyoruz.
yazılar
yazılar Şimdi jQuery’deki kısımları giriyoruz.
$(function(){
$("li.1").after("okunası değerlikte
");
$("li.2").before("okunası değerlikte
");
});
yazdırdığımız zaman ortaya çıkacak kod yapısı şu şekilde olacaktır.
yazılar okunası değerlikte
okunası değerlikte
yazılar aralarındaki fark bu. Şimdi gelelim diğer 4 metodumuza.İlk metod ile başlamak istiyorum..
.appendTo(); metodu ile .prependTo(); metodu birbirlerinin aynısıdır ve belirtilen tüm nesnelere bu işlemi uygularlar.Sadece yukardaki anlattığım fark geçerlidir..Yani birisi nesnenin önüne ekler birisi sonuna ekler.Hemen 2 örnekle onuda açıklayalım.
yazılar
yazılar
yazılar bu özellikler içinde kod yapımız bu şekilde olsun.jQuery’mizi yazalım.Ancak işte burada ufak bir farklılık var.jQuery’i yazarken önce eklenilecek nesneyi yazıyoruz ve sonrasında nereye ekleneceğini yazıyoruz.
$(function(){
$("p").appendTo("li");
});
yazdırdık.Kod yapımız ise
yazılarokunası değerlikte
yazılarokunası değerlikte
yazılarokunası değerlikte
şeklini aldı.Aynı işlemi .prependTo(); metoduyla uygulayacak olsaydık;
$(function(){
$("p").prependTo("li");
});
okunası değerlikte
yazılar
okunası değerlikte
yazılar
okunası değerlikte
yazılaryani buradaki işlemi seçili olan nesnenin birine değilde hepsine birden aynı işlemi uyguluyor.Şimdi geldik .insertAfter(); ve .insertBefore(); metodlarına..
Aslında bunu anlatmayacağım çünkü yapı ve sistem aynı sadece yaptığı işlem .after(); ve .before(); metodları sadece bir yazıya etkirken bu yapılar tüm seçili nesnelere aynı anda etki yapıyor.
Bu ilk 4 metod’u yeni yaptığım tasarım üzerinde bir işlemle sizlere gösterdim.İsterseniz izleyip daha düzgün bir bilgi alabilirsiniz.
Yazar: Eren Keskin
Kategori: jQuery
Web Adresi: ErenKeskin.com
Kaynak: http://www.erenkeskin.com/jquery-oncesine-ve-sonrasina-nesne-ekleme/
