jQuery ile data-attribute Değerlerini Çekme

jQuery, HTML elemanlarının data-* attribute değerlerine kolayca erişebilmemizi sağlar. Bu özellik, elemanlarla ilgili ek bilgi depolamak için oldukça kullanışlıdır. Özellikle, bir sayfadaki belirli HTML elemanlarından veri almak ve bu verileri işlemek istiyorsanız jQuery'nin data() fonksiyonu oldukça işinize yarayacaktır.

Bu yazıda, bir HTML sayfasındaki butonlara tıklandığında, ilgili div elemanlarından data-* attribute'lerini nasıl çekeceğimizi ve tüm div elemanlarının verilerini topluca nasıl alacağımızı inceleyeceğiz. Ayrıca, kodlarımızı daha temiz ve kısa hale getirmeye odaklanacağız.

Örnek Senaryo: Ürün Bilgilerini Alma

Diyelim ki bir sayfanızda ürün bilgilerini gösteren div elemanları ve her bir ürün için bir "Veri Al" butonu var. Ayrıca, sayfadaki tüm ürünlerden toplu olarak veri çekmek için bir genel buton da bulunuyor.

Aşağıda, bu örnek senaryoya uygun HTML yapısını inceleyelim:

<div>
  <div class="product" data-id="3234" data-product-index="1" data-name="Product 1">Some Content</div>
  <button type="button" class="getDataBtn">Get Data on div</button>
</div>
<div>
  <div class="product" data-id="423" data-product-index="2" data-name="Product 2">Some Content</div>
  <button type="button" class="getDataBtn">Get Data on div</button>
</div>
<div>
  <div class="product" data-id="3234" data-product-index="3" data-name="Product 3">Some Content</div>
  <button type="button" class="getDataBtn">Get Data on div</button>
</div>
<br><br>
<button type="button" class="getAllDataBtn">Get Data on all div</button>

Burada her bir product sınıfına sahip div elemanında ürünle ilgili data-id, data-product-index ve data-name gibi bilgileri saklıyoruz. Her ürün için bir buton, ayrıca tüm ürünlerin verisini almak için genel bir buton bulunuyor.

jQuery ile Tek Bir Üründen Veri Almak

Bir butona tıkladığınızda, ilgili div elemanındaki data-* attribute değerlerini çekmek için şu jQuery kodunu kullanabiliriz:

$(".getDataBtn").click(function () {
  var divData = $(this).siblings(".product").data();
  console.log(divData);
});

• Açıklama:
  • .getDataBtn sınıfına sahip butona tıklandığında, .siblings(".product") ile aynı kapsayıcı içindeki product sınıfına sahip div elemanına ulaşılır. Ardından, .data() fonksiyonu ile bu div elemanındaki tüm data-* attribute'leri bir nesne olarak alınır ve divData değişkenine atanır. Bu değişkeni console.log() ile ekranda görüntüleyebilirsiniz.

Tüm Ürünlerden Veri Almak

Sayfadaki tüm product sınıfına sahip div elemanlarının data-* attribute'lerini toplu olarak almak için ise şu jQuery kodunu kullanabiliriz:

$(".getAllDataBtn").click(function () {
  var allDivData = [];
  $(".product").each(function () {
    allDivData.push($(this).data());
  });
  console.log(allDivData);
});

• Açıklama:
  • .getAllDataBtn sınıfına sahip butona tıklandığında, sayfadaki tüm product sınıfına sahip div elemanları .each() döngüsü ile teker teker işlenir. Her bir div elemanından .data() fonksiyonu ile alınan veriler, allDivData adlı diziye eklenir. Son olarak, bu dizi console.log() ile ekranda görüntülenir.

Kodları Sadeleştirme

jQuery'nin sağladığı esneklik sayesinde kodlarımızı daha kısa ve sade hale getirebiliriz. Örneğin:

// Tek bir üründen veri çekme
$(".getDataBtn").click(function () {
  console.log($(this).siblings(".product").data());
});
 
// Tüm ürünlerden veri çekme
$(".getAllDataBtn").click(function () {
  console.log($(".product").map(function () { return $(this).data(); }).get());
});

• Sadeleştirme Açıklaması:
  • Tek bir üründen veri alırken, divData adlı geçici bir değişken kullanmak yerine, doğrudan console.log() içine veriyi yazdırabiliriz.
  • Tüm ürünlerden veri alırken ise .each() yerine .map() kullanarak daha kısa bir yazım elde edebiliriz. .get() fonksiyonu ile jQuery nesnesini saf JavaScript dizisine çeviririz.

Sonuç

Bu yazıda, jQuery ile HTML elemanlarından data-* attribute'lerini çekmenin ne kadar kolay olduğunu gördük. data() fonksiyonu ile bu verilere ulaşabilir ve istediğiniz şekilde işleyebilirsiniz. Kodlarımızı sadeleştirerek, daha kısa ve okunabilir bir yapı elde edebiliriz. Bu tip işlemler, web projelerinizde veri manipülasyonunu oldukça kolaylaştırır.

Umarım bu yazı jQuery'de data-attribute ile çalışma konusunda size yardımcı olmuştur!