Bagaimana cara mendapatkan saudara kandung dalam javascript?

Question

Keterangan. Dapatkan saudara dari setiap elemen dalam kumpulan elemen yang cocok, secara opsional difilter oleh pemilih

Table of Contents Show

Contoh menu navigasi
Memeriksa elemen navigasi yang diklik
Mendapatkan semua elemen saudara
Bagaimana cara mendapatkan saudara terakhir dalam JavaScript?
Bagaimana cara menemukan saudara kandung dalam HTML?
Apa saudara elemen berikutnya dalam JavaScript?
Apa itu tag saudara dalam HTML?

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

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

Bagaimana cara mendapatkan saudara terakhir dalam JavaScript?

Tidak ada metode langsung untuk mengakses saudara terakhir; . Simpan jawaban ini. iterate over all of the siblings until you reach the last one. Save this answer.

Bagaimana cara menemukan saudara kandung dalam HTML?

Metode saudara kandung () mengembalikan semua elemen saudara dari elemen yang dipilih . Elemen saudara adalah elemen yang memiliki induk yang sama.

Apa saudara elemen berikutnya dalam JavaScript?

Elemen. properti read-only nextElementSibling mengembalikan elemen segera setelah yang ditentukan dalam daftar anak induknya, atau null jika elemen yang ditentukan adalah yang terakhir dalam daftar