Pengelompokan jQuery - Metode end()

Referensi Perulangan jQuery

Contoh

Pilih semua paragraf, temukan elemen span di dalam paragraf tersebut, dan kembalikan mereka ke paragraf, lalu atur paragraf menjadi garis bawah merah tinggi 2 pixel:

$("p").find("span").end().css("border", "2px red solid");

Coba sendiri

Definisi dan penggunaan

Metode end() mengakhiri operasi filter paling dekat di rantai saat ini dan mengembalikan kumpulan elemen yang cocok ke keadaan sebelumnya.

Sintaks

.end()

Penjelasan detil

Sebagian besar metode pengelompokan jQuery akan mengoperasikan instansias objek jQuery dan menghasilkan objek baru yang cocok dengan kumpulan elemen DOM yang berbeda. Saat hal ini terjadi, harus memasukkan kumpulan elemen baru ke dalam tumpukan yang dijaga di dalam objek. Setiap pemanggilan metode filter yang sukses akan memasukkan elemen baru ke dalam tumpukan. Jika kami memerlukan kumpulan elemen lama, dapat digunakan end() untuk keluar kumpulan baru dari tumpukan.

Diperkirakan ada pasangan daftar yang sangat pendek di halaman:

<ul class="first">
   <li class="foo">item daftar 1</li>
   <li>item daftar 2</li>
   <li class="bar">item daftar 3</li>
</ul>
<ul class="second">
   <li class="foo">item daftar 1</li>
   <li>item daftar 2</li>
   <li class="bar">item daftar 3</li>
</ul>

Contoh 1

Umumnya, jQuery sangat berguna saat menggunakan atribut rangkaian (perintah berantai). Jika tidak menggunakan perintah berantai, biasanya kita memanggil objek sebelumnya melalui nama variabel, sehingga kita tidak perlu mengoperasikan tumpukan. Namun, melalui end(), kita dapat menyambungkan semua pemanggilan metode:

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

Coba sendiri

Perintah ini mencari elemen yang pertama dalam daftar dengan nama kelas foo dan mengatur latar belakang mereka menjadi merah. end() akan mengembalikan objek ke keadaan sebelum pemanggilan find(), jadi find() kedua mencari '.bar' di dalam <ul class="first">, bukan mencari di dalam <li class="foo"> di daftar, dan mengatur latar belakang elemen yang cocok menjadi hijau. Hasil akhir adalah elemen 1 dan 3 di daftar pertama yang diatur latar belakang warna, sedangkan elemen di daftar kedua tidak berubah.

Contoh 2

Kaitan jQuery ini dapat diwujudkan dalam blok kode struktural, metode filter membuka blok kode yang tersembunyi, dan metode end() digunakan untuk menutup blok kode:

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

Coba sendiri

Akhirnya fungsi end() bukan wajib, karena kita akan melepas objek jQuery yang diikuti. Namun, jika kode ditulis dalam bentuk ini, end() dapat memberikan simetri visual dan kesan program yang teratur, paling sedikit bagi pengembang yang lebih mudah membaca, tetapi biaya adalah kehilangan kinerja yang kecil karena pemanggilan ekstra.

Referensi Perulangan jQuery