jQuery ile Eksik İçerikleri Tamamlama Nasıl Yapılır?
<ul>
<li data-id="1">
<span class="title" data-id="1">
BAŞLIK
</span>
<span data-id="1">
ALT BAŞLIK
</span>
</li>
<li data-id="2">
<span class="title" data-id="2">
BAŞLIK
</span>
<span data-id="2">
ALT BAŞLIK
</span>
</li>
<li data-id="3">
<span data-id="3">
ALT BAŞLIK
</span>
</li>
<li data-id="4">
<span class="title" data-id="4">
BAŞLIK
</span>
<span data-id="4">
ALT BAŞLIK
</span>
</li>
</ul>
Merhaba PT.
Yukarıda vermiş olduğum örnekte ul
içerisinde bulunan li
'lerin data-id'leri var ve bu data-id'lere sahip içerlerinde <span>
'lar var. Bu yapıda bazı li
'lerin içinde title
class'ına sahip <span>
eksik. jQuery ile içinde BAŞLIK <span>
'ı eksik olan li
'lere BAŞLIK span'ını data-id'si ile birlikte eklemem gerekiyor.
Bu durumda da sizlerin yardımı gerekiyor. :)
Bu liste oluşturulurken de bu işlem yapılabilir, oluşturulduktan sonra da yapılabilir.
Ben oluşturuluktan sonra, yani DOM'a yukarıdaki ul (ve içindekiler) eklendikten sonra çalıştırılacak bir kod örneği vereceğim.
// 1) Öncelikle ul'yi seçelim.
const $list = $('ul'); // daha ayrıntılı bir seçici kullanmak gerek tabi...
// 2) ul içindeki li'leri de seçelim.
const $listItems = $list.find('li');
// 3) Tüm li'leri dönerek incelememiz gerekecek:
$listItems.each(function (index, element) {
// 3.1) Şu an baktığımız li elementini seçelim.
const $item = $(element);
// 3.2) Bu li elementinin içindeki ilk span elementini seçelim.
const $firstSpan = $item.find('span').first();
// 3.3) Bu span elementinin "title" class'ı var mı?
const isFirstSpanTitle = $firstSpan.hasClass('title');
// 3.4) Eğer title class'ı yoksa...
if(!isFirstSpanTitle) {
// 3.4.1) Baktığımız li elementinin data-id attribute'sini alalım.
const dataId = $item.attr('data-id');
// 3.4.2) Baktığımız li elementinin ilk elementi olarak BAŞLIK yazan, title class'ına sahip span'ımızı ekleyelim.
$item.prepend(`<span class="title" data-id="${dataId}">BAŞLIK</span>`);
}
});
Bu işlemleri tekrarlama ihtimaline karşı bunları bir fonksiyon haline getirmek daha uygun olacak:
// Fonksiyonumuz ul seçicisini ve başlık olarak yazılacak string'i parametrelerden alsın.
const fixTheList = (ulSelector, title="BAŞLIK") => {
// yukarıda yazdığım kodların aynısını ekliyorum.
// Fark sadece parametreden gelen değerlerin yerlerine yazılması...
const $list = $(ulSelector);
const $listItems = $list.find('li');
$listItems.each(function (index, element) {
const $item = $(element);
const $firstSpan = $item.find('span').first();
const isFirstSpanTitle = $firstSpan.hasClass('title');
if(!isFirstSpanTitle) {
const dataId = $item.attr('data-id');
$item.prepend(`<span class="title" data-id="${dataId}">${title}</span>`);
}
}
Bu fonksiyonu, ul elementi DOM'a eklendikten sonra çalıştırırsan title class'ına sahip span'ı olmayan tüm li elementlerine ilk element olarak bu span'ı ekler.
Fonksiyonu şu şekilde kullanabilirsin:
fixTheList('ul', "SONRADAN EKLENEN BAŞLIK");
Not: Kodları denemeden yazdım. Hatalı yazdığım yerler olabilir.