jQuery Traversing / DOM Insertion, Around

jQuery öncesi ne yapıyorduk bilmem diye söze başladığım günlerden birini yaşadım yine geçenlerde. Nedeni, yakın iki arkadaşımın üzerinde çalıştıkları WordPress üzerine kurulu web siteleri ile ilgili karşılaştıkları bir problemdi. Tema içerisinde birbirini etkileyen çok fazla stil kodu olmasına üzüldüğüm, her yüklenen eklenti ile bir şeylerin yok olduğu temaya dair ise güncel sorunumuz iframe‘lerin ortalanmıyor oluşuydu. Adım adım düzenlemeye başladığımız temada bu sorunu doğrudan CSS yerine jQuery Traversing ve DOM Insertion, Around metodlarından wrap() ile çözmenin en uygun ve daha pratik bir yöntem olacağını düşündüm. Nedeni ise iframe’lerin farklı biçimlerde, farklı alanlarda kullanılabilme ihtimaliydi ve arkadaşlarıma şurada şöyle burada böyle kod kullanmalısınız şeklinde bir ek iş yükü yüklemek istemedim. Temel alacağımız bir etiket üzerinden ilgili iframe(ler) bulunup ortalandığında uzun bir dönem için sorunu çözülmüş varsayabilmemiz mümkündü.

E-Posta Bültenine Kayıt Olmak İster misin?

E-posta listesine katılarak yeni yazılardan haberdar olabilirsin.

DOM Insertion, Around

.wrap()

Manipulation > DOM Insertion, Around metodlarından biri olan wrap()‘ın özelliği belirlenen herhangi bir html elemanına bir üst eleman / parent ekleyebilmemizi sağlaması. Ek olarak, wrappingElement (Selector, htmlString, Element ve diğer metodlar) ve fonksiyonlar ile ilişkilendirilebilmekte.

Yukarıda gördüğünüz örnek kodun görevi entry-content sınıfı ile tanımlanmış bir paragraf içerisinde yer alan iframe kodunu foo class‘ı ile tanımlanmış div içerisine alması. Böylelikle foo’nun özelliği olan text-align: center ile iframe bulunduğu alan içerisinde ortalanmış oluyor. Peki, başka önerisi olan?

Peki bu kadar mı? Elbette değil. Hazır yazı yazmaya ve bir örnek üzerinden ve DOM üzerinde oynamalara başlamışken ilgili diğer metodları ve elbette traversing dahil anlatmadan geçmek olmazdı. O halde, sırası ile devam edelim. Yine önceki örnekteki gereksinime göre metodları açıklayacak ve kod eklemeleri ile devam edeceğim. Ayrıca gerekir ise sorularınızı ilgili alanlarda yorum olarak iletebilirsiniz.

.unwrap()

unwrap metodu wrap metodunun aksi olarak belirlenen elementin sahip olduğu parent elementine müdahale etmek, onu kaldırmak için kullanılır. Herhangi bir argümanı bulunmamaktadır. Aşağıdaki örnekte hem wrap hem de unwrap metodlarının kullanımını birlikte görüntüleyebilirsiniz. Kod alanında mavi olarak işaretlenen metin iç içe geçmiş span ve strong etiketlerini barındırmaktadır. unwrap ile span etiketine ait strong parent durumundadır ve button ile kaldırılabilmektedir.

.wrapAll()

wrapAll metodu temelde wrap metodu gibi çalışıyor ve yine onun gibi wrappingElement (Selector, htmlString, Element ve diğer metodlar) ve fonksiyon yapıları ile birlikte kullanılabiliniyor. Özelliği, wrap metodundan farklı olarak DOM yapısı içerisinde çok derinlikli elemanları kapsayan parent ekleyebilmemize olanak vermesi. Aşağıdaki örnekler farklı argümanlar kullanılarak yapılabilecek temel işlemleri barındırmaktadır. wrapAll butonuna tıkladığınız her seferde aldığı parent ile ne gibi değişiklikler gerçekleşeceğini görebilirsiniz.

.wrapInner()

Belirli element içerisindeki her HTML element için parent ekleyebilmemize olanak veren wrapInner metodu yine wrap metodunda olduğu gibi argüman kullanımına olanak sağlamakta.

Not: jQuery Traversing / DOM Insertion, Around #2 başlıklı devam yazısını yakında paylaşacağım.

Leave a Reply