jQuery Kullanarak Liste İçeriklerini Seperatör İle Yazdırmak

Online yayınlar üzerinden içerik analizi yapmak istediğinizde, veri edinimi aşamasında bazen hızlı çözümler üretmek durumunda kalabiliyorsunuz. Bu süreçlerde Inspect Element Tool altındaki Console bir kez daha günün kurtarıcısı olabiliyor. Bu alan üzerinden pratik bir şekilde uygulayabileceğiniz JavaScript kodları sayesinde bir çok işlemi tek ekran üzerinden, sorunsuzca gerçekleştirebilmek, kayıt altına alabilmek mümkün oluyor.

Bu yazının konusuna zemin oluşturan olaya değinecek olursak, bir çok child barındıran bir parent element içeriğini tanımlayacağınız ayrıştırıcı ile dökmek istediğinizi varsayalım. Örnek senaryomuzda, bir online kütüphanede listelenen kitapların başta isimleri olmak üzere bazı bilgilerine harici olarak ihtiyaç duyduğumuzu, ihtiyaç duyduğumuz bu bilgileri ise ayrı ayrı ve istediğimiz seperatör ile derlemek istediğizi varsayalım. Bu noktada jQuery .map() metodundan destek alabiliriz. Traversing > Filtering altındaki bu metod ile element değerlerinin derlenmesi sağlanabilmektedir. Örnek uygulamalar iin jQuery döküman sayfasını inceleyebilirsiniz.

Form işlemlerinde elemanlardan edinilen bilgilerin derlenmesi konusunda oldukça işe yarayan .map() metodunu biz yazının başında da belirttiğim gibi Console üzerinden ilgili sayfadaki verilerin çekillmesi sürecinde değerlendireceğiz.

Jquery map

Örneğimize dönecek olursak, Kitapyurdu‘nda listelenen Nazım Hikmet Ran kitaplarının başlıklarını Console üzerinden derleyelim.

jQuery('.name.ellipsis').map(function() {
  return jQuery(this).text();
}).get().join('|').toLowerCase();

Kitap isimleri div‘e tanımlı name ellipsis class değerleri ile işaretlenmekte. Console üzerinden kodu gönderdiğinizde alacağınız dönüş şu şekilde olacaktır.

"fatma, ali ve diğerleri|bu şehir güzelse sen…|kafatası|yusuf i̇le menofis: oy…|keloğlan|sarayda|la fontaine'den masa…|ne güzel şey hatırla…|hanene huzur dolsun…|la fontaine'den masa…|kemal tahir’e mapus…|835 satır|i̇lk şiirler|kuvayi milliye (şiirler)|yeni şiirler  (1951-1959)|benerci kendini niçin…|yatar bursa kalesinde|yazılar 1 / sanat, ede…|yazılar 4 / 1936|yazılar 6 / konuşmalar|yazılar 5 / 1937-1962|yazılar 2 / 1924-1934|yazılar 3 / 1935|demokles'in kılıcı oy…|ferhad i̇le şirin oyunl…|sevdalı bulut|kadınların i̇syanı oyu…|masallar, hikayeler 1/…|masallar, hikayeler 2/…|masallar, hikayeler 3/…|yeşil elmalar / roman…|yaşamak güzel şey b…|kan konuşmaz / rom…|sevdalı bulut masalı|henüz vakit varken g…|son şiirleri (1959-1963)|memleketimden i̇nsan…|üç şiir yaşamaya dai…|ağustos böceği i̇le k…|kuvayı milliye|büyük i̇nsanlık - kend…|human landscapes f…|nazım hikmet şiir set…|kuvayi milliye (ciltli)|kuvayi milliye & abidi…|çiftçi i̇le çocukları|öteki defterler (ciltli)|sanat ve edebiyat üst…|poems of nazim hikmet|cezaevinden memet f…|şeyh bedreddin dest…|bütün şiirleri / nazım …|kuvayi milliye (karton…|çankırıdan pirayeye …|kemal tahir'e mapusa…|yaşamaya dair|kuvayi milliye|nazım hikmet seçme …|kemal tahire mektuplar|i̇t ürür kervan yürür|kemal tahir'e mapus…|nazım hikmet şiirleri …|ne güzel şey hatırla…|yazılar (1935) / yazılar 3|kafatası oyunlar 1 / o…|pirayeye bütün mektu…|yazılar (1937-1962) / y…|demokles'in kılıcı oy…|yazılar (1937-1962) / y…|yazılar (1936) / yazılar…|yazılar (1936) / yazılar…|nazım i̇le piraye|yeni şiirler (1951-195…|yaşamak güzel şey b…|yaşamak güzel şey b…|yeşil elmalar / roman…|kan konuşmaz roma…|kan konuşmaz roma…|yeşil elmalar / roman…|son şiirleri (1959-196…|la fontaine'den masa…|835 satır / şiirler 1|benerci kendini niçin…|kuvayi milliye / şiirleri 3|yatar bursa kalesind…|sanat edebiyat kültür…|ferhad i̇le şirin oyunl…|memleketimden i̇nsan…|ferhad i̇le şirin oyunl…|çeviri hikayeler / mas…|835 satır / şiirler 1|kadınların i̇syanı oyu…|yusuf i̇le menofis oyu…|çeviri hikayeler / mas…|yeni şiirler (1951-195…|i̇lk şiirler / şiirler 8|demokles'in kılıcı oy…|memleketimden i̇nsan…|son şiirleri (1959-196…|hikayeler  / masallar h…"

Seperatör olarak “|” (Sheffer stroke, verti-bar, vbar, stick, vertical line, vertical slash, bar, glidus, obelisk, pipe vb. isimlerle anılan işaret) kullandığım kodun işlemesi için ilgili sayfada jQuery yüklü olması gerekmekte elbette.

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

Kimi durumlarda jQuery kullanılmayan sayfalarla da karşılaşmak mümkün. Bu durumda yine Console üzerinden sayfaya jQuery ekleyebilirsiniz.

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir