jQuery ile Eksik İçerikleri Tamamlama Nasıl Yapılır?

redline 723 gün önce

390 defa görüntülendi ve 1 kişi tarafından değerlendirildi

  <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. :)

jquery

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (2)

ebykdrms

723 gün önce

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.

#012460

redline

723 gün önce

@ebykdrms hocam çok teşekkür ederim. Kodu aşağıdaki şekilde kısalttım. Dün akşam çok çalışmanın azizliği olsa gerek mantığı kuramamışım. :)

    $("ul li").each(function () {
        if(!$(this).find('span').hasClass('title')) {
            $(this).prepend('<span class="title" data-id="' + $(this).attr('data-id') + '">BAŞLIK</span>');
        }
    });

#012468