Keterangan. Dapatkan saudara dari setiap elemen dalam kumpulan elemen yang cocok, secara opsional difilter oleh pemilih
versi ditambahkan. 1. 0
pemilih
Jenis.
String yang berisi ekspresi pemilih untuk mencocokkan elemen
Diberikan objek jQuery yang mewakili sekumpulan elemen DOM, metode .siblings() memungkinkan kita untuk mencari melalui saudara dari elemen ini di pohon DOM dan membuat objek jQuery baru dari elemen yang cocok
Metode ini secara opsional menerima ekspresi pemilih dari tipe yang sama yang dapat kita berikan ke fungsi $(). Jika pemilih disediakan, elemen akan disaring dengan menguji apakah mereka cocok
Pertimbangkan halaman dengan daftar sederhana di atasnya
1
2
3
4
5
6
7
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
Jika kita mulai dari item ketiga, kita dapat menemukan saudara kandungnya
1
$( "li.third-item" ).siblings().css( "background-color", "red" );
_Hasil panggilan ini adalah latar belakang merah di belakang item 1, 2, 4, dan 5. Karena kami tidak memberikan ekspresi pemilih, semua saudara kandung adalah bagian dari objek. Jika kami telah menyediakan satu, hanya item yang cocok di antara keempatnya yang akan disertakan
Elemen asli tidak disertakan di antara saudara kandung, yang penting untuk diingat saat kita ingin menemukan semua elemen pada level tertentu dari pohon DOM. Namun, jika koleksi asli berisi lebih dari satu elemen, mereka mungkin bersaudara dan keduanya akan ditemukan. Jika Anda memerlukan daftar eksklusif saudara kandung, gunakan $collection.siblings().not($collection)
Contoh
Temukan saudara unik dari semua elemen li kuning di 3 daftar (termasuk elemen li kuning lainnya jika sesuai)
Properti nextSibling read-only dari antarmuka Node mengembalikan node segera setelah yang ditentukan di childNodes induknya, atau mengembalikan null jika node yang ditentukan adalah anak terakhir di elemen induk
Catatan. Browser menyisipkan Text node ke dalam dokumen untuk mewakili spasi kosong di markup sumber. Oleh karena itu, simpul yang diperoleh, misalnya, menggunakan Node.firstChild atau Node.previousSibling dapat merujuk ke simpul teks spasi putih daripada elemen sebenarnya yang ingin diperoleh penulis
Artikel Spasi kosong di DOM berisi lebih banyak informasi tentang perilaku ini
Anda dapat menggunakan Element.nextElementSibling untuk mendapatkan elemen berikutnya dengan melewatkan node spasi putih, teks antar-elemen lainnya, atau komentar
Seorang siswa saya bertanya kepada saya bagaimana saya bisa mendapatkan saudara tautan navigasi ketika diklik. Hari ini, kita akan mencari tahu
Mari kita menggali lebih dalam
Contoh menu navigasi
Misalnya, bayangkan kita memiliki menu navigasi yang terlihat seperti ini
<ul class="nav"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> </ul>
Setiap kali seseorang mengklik tautan di menu itu, Anda ingin mendapatkan semua elemen saudara dan memodifikasinya dengan cara tertentu
Memeriksa elemen navigasi yang diklik
Pertama, saya akan menggunakan delegasi acara untuk mendengarkan semua klik pada dokumen, dan menjalankan fungsi callback clickHandler() sebagai tanggapan
document.addEventListener('click', clickHandler);
Kami hanya ingin menjalankan fungsi panggilan balik kami jika tautan di dalam elemen .nav diklik
Kita bisa menggunakan sesuatu seperti metode Element.matches() untuk melakukan itu. Tetapi jika tautan memiliki elemen anak di dalamnya (seperti SVG), pemeriksaan kami akan gagal jika SVG dan bukan elemen tautan induk yang diklik
/** * Handle click events * @param {Event} event The event object */ function clickHandler (event) { // Only run on .nav a elements // This would fail if an SVG inside the link was clicked if (!event.target.matches('.nav a')) return; } _
Mari gunakan metode Element.closest()_ untuk mencari elemen induk document.addEventListener('click', clickHandler); 0
/** * Handle click events * @param {Event} event The event object */ function clickHandler (event) { // Only run on .nav a elements let link = event.target.closest('.nav a'); if (!link) return; } _
Mendapatkan semua elemen saudara
Ada beberapa cara untuk melakukan ini, termasuk menelusuri setiap saudara satu per satu
Tapi menurut saya pendekatan termudah adalah mendapatkan semua document.addEventListener('click', clickHandler); 0 elemen di dalam induk menggunakan document.addEventListener('click', clickHandler); 2, lalu lewati elemen yang saat ini diklik