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ılar

    okunası 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ılar

    okunası değerlikte


  • yazılar

    okunası değerlikte


  • yazılar

    okunası 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ılar
    •

    yani 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/