.add()

.add(seçici) Dönen Değer : jQuery Nesnesi

Açıklama : Seçilmiş olan elemanlara yeni bir eleman seçimi ekleyip, toplam elemanlardan yeni bir set oluşturur.

.add(seçici)

seçici
Tip : Seçici değer
Seçilmiş olan elemanlara eklenmek istenen elemanları bulmak için seçici değeri.

.add(elemanlar)

elemanlar
Tip : HTML eleman seti
Seçilmiş olan elemanlara eklenmek istenen bir ya da birkaç eleman.

.add(html)

html
Tip : HTML kodu string
Seçilmiş olan elemanlara eklenmek istenen eleman(lar)ı tarif eden HTML kodunun string hali.

.add(seçim)

seçim
Tip : jQuery nesnesi
Seçilmiş olan elemanlara eklenmek istenen jQuery nesnesi olarak eleman(lar).

.add(seçici, bağlam)

seçici
Tip : Seçici değer
Seçilmiş olan elemanlara eklenmek istenen eleman(lar)ı belirleyen seçici değer.

bağlam
Tip : Eleman
Seçicinin elemanları aramaya başlayacağı yer. $(seçici, bağlam) metodundaki bağlam gibi.

DOM elemanlarından oluşan bir jQuery nesnesi verildiğinde, .add() metodu bu elemanlara yeni elemanlar ekler ve toplam tüm elemanları yeni bir jQuery nesne olarak geri döner. .add() metoduna verilecek argümanlar $() metodu ile eleman seçerken verdiğimiz argümanlarla aynıdır. Bir seçici değer ya da bir HTML kod olabilir.

Bu metodun kendisine verilen eleman setine yenilerini eklerken .add() metoduna verilen sıraya göre eklediğini düşünmeyin. Elemanlar döküman içerisinde oldukları sıraya göre sonuç eleman seti sıralanır. Örneğin :

        <div>div 1</div>
        <p>Merhaba</p>
        <div>DIV 2</div>

bu elemanlara şu scripti çalıştırsak :

console.log($("p").add("div"));

Bize konsolda bir <p> ve arkasından 2 tane <div> elemanı vermez, aynen dökümandaki sırasına göre toplamda seçilen elemanlar verilir.

Elde edilen yeni eleman seti aşağıda gösterildiği gibi zincirleme metodlar olarak kullanılabileceği gibi, bir değişkene aktarılarak daha sonra da kullanılabilir.

$( "p" ).add( "div" ).addClass( "widget" );
var pdiv = $( "p" ).add( "div" );

Aşağıdaki kod eklenen elemanları orjinal sete eklemez, yeni bir set oluşturur.

var pdiv = $( "p" );
pdiv.add( "div" ); // YANLIŞ, pdiv değeri değişmez

Basit bir liste ve bir paragraftan oluşan bir içerik düşünelim :

<ul>
  <li>liste elemanı 1</li>
  <li>liste elemanı 2</li>
  <li>liste elemanı 3</li>
</ul>
<p>bir paragraf</p>

Liste elemanlarını ve paragrafı elde etmek için .add() metoduna bir seçici değeri ya da DOM elemanın kendisini referans vererek gerçekleştirebiliriz.

$( "li" ).add( "p" ).css( "background-color", "red" );

ya da

$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] )
  .css( "background-color", "red" );

Bu kodun sonucu dört elemanın da arkaplan renginin kırmızı olmasıdır. .add() metoduna bir HTML kodunu string olarak verirsek o koddaki eleman da sete eklenerek işlem görecektir. Örneğin listemize yeni bir paragraf ekleyip onların arka rengini değiştirmek istersek :

$( "li" ).add( "<p>yeni paragraf</p>" )
  .css( "background-color", "red" );

Eleman setine yeni paragraf eklenir ve arka rengi kırmızı da olur , ancak paragraf sayfada görünmez. Sonuçta hafızada yeni bir eleman oluşturup onu değiştirdiniz, sayfaya eklenmesi için başka kodlar yazmalısınız.

Not : .add() metodunun tersi işlem yapmak için not(elemanlar | seçici) metodunu belirttiğiniz elemanları seçilenlerden kaldırmak için kullanabilirsiniz. Ayrıca .end() metodu ile elemanları eklemeden önceki sete geri dönebilirsiniz.

Örnekler :

Tün <div>leri bulur ve sınır çizgisi ekler. Sonra sete tüm paragrafları ekleyerek arka renklerini sarı yapar.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            div {
                width: 60px;
                height: 60px;
                margin: 10px;
                float: left;
            }
            p {
                clear: left;
                font-weight: bold;
                font-size: 16px;
                color: blue;
                margin: 0 10px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <p>Bu eklenir... (dikkat sınır çizgi yok)</p>

        <script>
            $( "div" ).css( "border", "2px solid red" )
                .add( "p" )
                .css( "background", "yellow" );
        </script>
    </body>
</html>

Bu eklenir... (dikkat sınır çizgi yok)

Seçilen eleman setine başka elemanları da ekler.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <p>Merhaba</p>
        <span>Tekrar merhaba</span>

        <script>
            $( "p" ).add( "span" ).css( "background", "yellow" );
        </script>
    </body>
</html>

Merhaba

Tekrar merhaba

Boşta üretilmiş elemanlara yenisini ekler.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <p>Merhaba</p>

        <script>
            $( "p" ).clone().add( "<span>Yeniden</span>" )
                .appendTo( document.body );
        </script>
    </body>
</html>

Merhaba

Seçilen eleman setine eleman olarak verilen değeri ekler.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <p>Merhaba</p>
        <span id="a">Yine merhaba</span>
        <script>
            $( "p" ).add( document.getElementById( "a" ) )
                .css( "background", "yellow" );
        </script>
    </body>
</html>

Merhaba

Yine merhaba

Değişken olarak toplanan kolleksiyona nasıl elemanlar ekleneceğini gösterir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <p>Merhaba</p>
        <span id="a">Yine merhaba</span>
        <script>
            var kolleksiyon = $( "p" );
            // yeni kolleksiyon oluştur
            kolleksiyon = kolleksiyon.add( document.getElementById( "a" ) );
            kolleksiyon.css( "background", "yellow" );
        </script>
    </body>
</html>

Merhaba

Yine merhaba