.end()

.end() Dönen Değer : jQuery Nesnesi
Açıklama : Son yapılan filtreleme işlemini sonlandırır ve bir önceki sete geri döner.

.end()
Bu metod herhangi bir parametre almaz.

Birçok jQuery DOM işleme metodu bir jQuery nesnesi oluşumunu alır, elemanları işler ve yeni bir nesne elde eder. Zincirleme metodlar kullanılırken her yapılan filtreleme işlemi hafıza yığınına filtrelenmiş elemanlardan oluşan yeni bir set atar. Eğer bir önceki sete geri dönmek istersek, .end() metodu ile yığındaki bir önceki sete geri dönebiliriz.

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

<ul class="first">
  <li class="foo">liste elemanı 1</li>
  <li>liste elemanı 2</li>
  <li class="bar">liste elemanı 3</li>
</ul>
<ul class="second">
  <li class="foo">liste elemanı 1</li>
  <li>liste elemanı 2</li>
  <li class="bar">liste elemanı 3</li>
</ul>

.end() metodu özellikle zincirleme metodlarda çok faydalıdır. Zincir metodlar kullanılmayacaksa zaten önceki seti bir değişkene saklayıp sonraki satırda aynı seti kullanabilirsiniz. Ama aşağıdaki örnek bizer .end() metodunun etkili kullanımını gösteriyor.

$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end()
  .find( ".bar" )
    .css( "background-color", "green" );

Bu kod ilk listedeki foo sınıf adına sahip elemanları buluyor ve arka rengini kırmızı yapıyor. Sonra .end() metoduyla daha önce yapılan son filtreyi iptal edip ilk listenizin tüm elemanlarına geri dönüyor ve bar sınıf değerine sahip elemanları bulup onların da rka rengini yeşil yapıyor. Sonuçta ilk listedeki 1. ve 3. elemanın arka rengi değişiyor, 2. listede rengi değişen olmaz.



Örnekler :

Tüm paragrafları seçer, onların içindeki <span> elemanlarını bulur ve işler, sonra tekrar paragraflar seçimine geri döner :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p, div {
                margin: 1px;
                padding: 1px;
                font-weight: bold;
                font-size: 16px;
            }
            div {
                color: blue;
            }
            b {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            Merhaba <span>nasılsın</span> neler <span>yapıyorsun</span>?
        </p>
       
        <p>
            Bu <span>span</span> bu <span>cümledeki</span>
            birçok <span>span'dan</span> biri.
        </p>
       
        <div>
            Başlangıçtaki jQuery objesi içindeki Tag'ler: <b></b>
        </div>
       
        <div>
            find() sonrası jQuery objesi içindeki Tag'ler: <b></b>
        </div>
       
        <div>
            end() sonrası jQuery objesi içindeki Tag'ler: <b></b>
        </div>

        <script>
            jQuery.fn.showTags = function( n ) {
                var tags = this.map(function() {
                        return this.tagName;
                    }).get().join( ", " );
                $( "b" ).eq( n ).text( tags );
                return this;
            };
           
            $( "p" )
                .showTags( 0 )
                .find( "span" )
                    .showTags( 1 )
                    .css( "background", "yellow" )
                .end()
                .showTags( 2 )
                .css( "font-style", "italic" );
        </script>
    </body>
</html>

Merhaba nasılsın neler yapıyorsun?

Bu span bu cümledeki birçok span'dan biri.

Başlangıçtaki jQuery objesi içindeki Tag'ler:
find() sonrası jQuery objesi içindeki Tag'ler:
end() sonrası jQuery objesi içindeki Tag'ler:

Tüm paragrafları seçer, onların içindeki span elemanları bulur ve sonra seçimi tekrar paragraflara geri döndürür.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                margin: 10px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <p><span>Merhaba</span>, nasılsın?</p>

        <script>
            $( "p" )
                .find( "span" )
                .end()
                .css( "border", "2px red solid" );
        </script>
    </body>
</html>

Merhaba, nasılsın?

.

.