.addBack()

.addBack([seçici]) Dönen Değer : jQuery Nesnesi

Açıklama : Yığına atılmış eleman setlerinden bir öncekine döner ve verilmiş olan seti ona ekleyerek yeni set oluşturur.

.addBack([seçici])

seçici
Tip : Seçici değer
Bulunan eleman setine uygulanacak olan seçici değer.

end() metodunda açıklandığı üzere zincirleme metodlar kullanılırken bulunan her yeni eleman seti hafızada yığına yeni bir set olarak atılır. Böylece eşleşen eleman setlerinin takibi yapılır. Eğer bir önceki eleman seti gerekiyorsa addBack() metodu faydalı olacaktır.

Farzedelim sayfada bir küçük listemiz var. :

<ul>
  <li>liste elemanı 1</li>
  <li>liste elemanı 2</li>
  <li class="third-item">liste elemanı 3</li>
  <li>liste elemanı 4</li>
  <li>liste elemanı 5</li>
</ul>

Aşağıdaki kodun sonucu listedeki 3, 4 ve 5'inci elemanların arka rengi kırmızı olur.

$( "li.third-item" ).nextAll().addBack()
  .css( "background-color", "red" );

İlk seçim 3. liste elemanını seçer ve yığına sadece bu elemanı atar. nextAll() metodu ise ondan itibaren geri kalan elemanları bulur, yani 4. ve 5. liste elemanlarını bulur ve yığına yeni bir nesne olarak atar. Son olarak addBack() metodu bu 4. ve 5. elemanlardan oluşan seti , yığında bir önceki set olan 3. liste elemanına ekler. Böylece listedeki 3, 4 ve 5'inci elemanlar seçilmiş olur. Sıralama dökümandaki sırayla olacaktır, yani
{[<li.third-item>,<li>,<li> ]}.

Örnekler :

.addBack() metodu yığındaki bir önceki eleman setine şu anda bulunulan eleman setini ekler. //İlk Örnek altındaki satır soldaki <div> elemanı içindeki <p> elemanlarını bulur ve arka renklerini değiştirir. //İkinci Örnek altındaki satır ise sağdaki <div> içindeki <p> elemanları bulur, sonra buna <div> elemanın kendisini de addBack() metodu ile ekleyerek tamamının arka rengini değiştirir. :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
        p, div {
            margin: 5px;
            padding: 5px;
        }
        .border {
            border: 2px solid red;
        }
        .background {
            background: yellow;
        }
        .left, .right {
            width: 45%;
            float: left;
        }
        .right {
            margin-left: 3%;
        }
        </style>        
    </head>
    <body>
        <div class="left">
            <p><strong><code>addBack()</code> öncesi</strong></p>
            <div class="before-addback">
                <p>İlk Paragraf</p>
                <p>İkinci Paragraf</p>
            </div>
        </div>
        <div class="right">
            <p><strong><code>addBack()</code> sonrası</strong></p>
            <div class="after-addback">
                <p>İlk Paragraf</p>
                <p>İkinci Paragraf</p>
            </div>
        </div>
        <script>
            $( "div.left, div.right" ).find( "div, div > p" )
                .addClass( "border" );
            // İlk Örnek
            $( "div.before-addback" ).find( "p" )
                .addClass( "background" );
            // İkinci Örnek
            $( "div.after-addback" ).find( "p" ).addBack()
                .addClass( "background" );
        </script>
    </body>
</html>

addBack() öncesi

İlk Paragraf

İkinci Paragraf

addBack() sonrası

İlk Paragraf

İkinci Paragraf