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 ise WordPress üzerine kurulu bir web sitesinde yaşanan problemdi.

AA

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 CSS1 yerine jQuery Traversing2 ve DOM Insertion3, Around metotlarından wrap()4 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ü.

DOM Insertion, Around

.wrap()

Manipulation5 > DOM Insertion, Around3 metotlarından biri olan wrap()'ın özelliği belirlenen herhangi bir html elemanına bir üst eleman / parent ekleyebilmemizi sağlaması4. Ek olarak, wrappingElement (Selector, htmlString, Element ve diğer metotlar) 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 metotları ve elbette traversing dahil anlatmadan geçmek olmazdı. O halde, sırası ile devam edelim. Yine önceki örnekteki gereksinime göre metotları açıklayacak ve kod eklemeleri ile devam edeceğim. Ayrıca gerekir ise sorularınızı ilgili alanlarda yorum olarak iletebilirsiniz.

.unwrap()

unwrap()6 metotu wrap() metotunun 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 metotları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()7 metotu temelde wrap() metotu gibi çalışıyor ve yine onun gibi wrappingElement (Selector, htmlString, Element ve diğer metotlar) ve fonksiyon yapıları ile birlikte kullanılabiliniyor. Özelliği, wrap metotundan 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()8 metotu yine wrap metotunda olduğu gibi argüman kullanımına olanak sağlamakta.