Javascript menemukan induk dengan kelas

Induk jQuery dengan metode kelas memungkinkan kita untuk mencari induk dari objek jQuery yang mewakili sekumpulan elemen DOM di pohon DOM dan membuat objek jQuery baru dari elemen yang cocok. Metode parent() dan parents() hampir identik, dengan pengecualian bahwa yang terakhir hanya bergerak satu tingkat ke atas pohon DOM. Opsional, metode ini menerima ekspresi pilihan dari jenis yang sama dengan fungsi $(). Jika pemilih disediakan, elemen akan difilter berdasarkan apakah mereka cocok atau tidak

induk jQuery dengan ikhtisar kelas

• Pemilih kelas jQuery memilih semua komponen yang memiliki kelas tertentu. Atribut kelas dari elemen HTML disebut sebagai atribut kelas
• Kelas induk jQuery digunakan untuk menentukan kelas elemen yang sedang dipilih
• Seharusnya tidak ada nomor di awal. Beberapa komponen HTML ditata menggunakannya. Untuk memilih bagian, atau elemen, dari halaman HTML, jQuery menggunakan pemilih gaya CSS
• Kemudian kita dapat menggunakan metode atau fungsi jQuery untuk melakukan sesuatu dengan komponen jQuery
• Ketik tanda dolar diikuti dengan tanda kurung untuk menggunakan salah satu dari pemilih ini $(). Fungsi jQuery() disingkat jQuery
• Letakkan elemen yang ingin kita pilih di dalam tanda kurung. Kutipan tunggal atau ganda keduanya dapat diterima. Kemudian, mengikuti tanda kurung, beri tanda titik setelah teknik yang ingin kita terapkan
• Pemilih kelas dan ID di jQuery mirip dengan pemilih CSS. Pemilih ID di CSS digunakan untuk menerapkan gaya ke elemen HTML tertentu
• Atribut ID elemen HTML harus cocok dengan pemilih ID CSS. Tidak seperti kelas yang dapat diterapkan ke beberapa komponen di seluruh situs, ID unik hanya dapat diterapkan ke satu elemen
• Properti ID CSS akan lebih diutamakan daripada properti Kelas CSS. Tulis karakter hash (#) diikuti dengan id elemen untuk mengambilnya

Bagaimana menemukan induk jQuery dengan kelas?

Ada dua pendekatan untuk menemukan jQuery dengan kelas adalah sebagai berikut. Pertama, dengan bantuan nama kelas, kita dapat menentukan kelas induk dari suatu elemen dalam HTML

Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda

Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya

Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)

Harga
Lihat Kursus

600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (85.265 peringkat)

Pendekatan 1

• Metode terdekat() pada dasarnya digunakan untuk mengembalikan item dari leluhur pertama. Jika kelas leluhur ada, itu akan mengembalikan nama kelas;
• Metode on() digunakan untuk memilih event handler untuk sekelompok komponen. Kemudian, ketika pengguna menekan tombol, fungsi tersebut dipanggil

Pendekatan 2

• Penangan kejadian untuk komponen yang dipilih dipilih menggunakan metode on(). Kemudian, ketika pengguna menekan tombol, fungsi tersebut dipanggil
• Metode parent() digunakan untuk mendapatkan semua leluhur item yang ditentukan. Jika kelas leluhur ada, ia mengembalikan nama kelas;
• Pendekatan 1 dan 2 digunakan untuk menemukan kelas induk jQuery

Elemen induk menggunakan jQuery

• jQuery adalah framework Javascript gratis yang memfasilitasi interaksi antara dokumen HTML dan CSS
• Persamaan pemilih ke dalam teknik induk dapat membantu menyederhanakan banyak hal. Kita hanya perlu mengetahui level kita untuk menggunakannya. Jika kita tidak perlu mengetahui kelas node induknya
• Orangtua () mengembalikan larik anak dari simpul induk asli ke simpul HTML, orangtua () mengembalikan larik anak. Untuk mendapatkan induk ke-n, panggil metode induk dengan argumen eq (n-1)” (0-diindeks)
• Metode terdekat () memindai pohon DOM untuk item ini dan leluhurnya dan membuat objek jQuery baru dari elemen yang cocok dengan pengujian elemen itu sendiri
• Ini bekerja melalui pendahulu elemen DOM, mengembalikan yang pertama yang cocok dengan pemilih yang kami berikan sebagai input
• Metode parent() melintasi pohon DOM ke induk langsung dari masing-masing elemen ini dan membuat objek jQuery baru dari elemen yang cocok, mengingat objek jQuery yang mewakili sekelompok elemen DOM
• Teknik ini mirip dengan parents() dengan pengecualian bahwa parent() hanya naik satu tingkat di pohon DOM
• Opsional, metode mengambil ekspresi pilihan dari jenis yang sama dengan fungsi $(). Jika pemilih diberikan, elemen difilter dengan melihat apakah mereka cocok
• Metode parent() digunakan untuk menemukan elemen induk langsung. Fungsi ini menempatkan elemen induk elemen yang ditentukan
• Metode parent() ini mengembalikan elemen yang ditentukan setelah melintasi satu atau lebih level yang lebih tinggi

Contoh nama kelas induk JQuery

Contoh di bawah ini menunjukkan contoh kelas nama induk jQuery adalah sebagai berikut

1) kelas nama induk jQuery dengan metode terdekat –

Contoh di bawah ini menunjukkan kelas nama induk jQuery dengan metode terdekat adalah sebagai berikut. Metode terdekat digunakan untuk mendapatkan elemen leluhur pertama

Kode

<!DOCTYPE html>
<html>
<head>
<title> JQuery parent class</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:Red;">
JQuery parent class
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: Medium;">
</p>
<div class="parent">
<div class="child"></div>
</div>
<button>
Click on this button
</button>
<p id="GFG_DOWN" style=
"color: Red; font-size: 20px; font-weight: Medium;">
</p>
<script>
$('#GFG_UP').text('Click on below button');
$('button').on('click', function() {
var object = $('.child').closest('.parent');
if (object.length) {
$('#GFG_DOWN').text("Child class name = child"
+ " Parent Class Name = parent" + " Exists");
}
else {
$('#GFG_DOWN').text("Class not exist");
}
});
</script>
</body>
</html>

2) induk jQuery dengan kelas untuk mendapatkan semua elemen leluhur yang cocok –

Contoh di bawah ini menunjukkan induk jQuery dengan kelas untuk mendapatkan semua elemen leluhur yang cocok

Kode

<!DOCTYPE html>
<html>
<head>
<title> JQuery parent class </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:Red;">
JQuery parent class
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: Medium;">
</p>
<div class="parent">
<div class="child"></div>
</div>
<button>
Click on this button
</button>
<p id="GFG_DOWN" style=
"color: Red; font-size: 20px; font-weight: medium;">
</p>
<script>
$('#GFG_UP').text('Click on below button');
$('button').on('click', function() {
var object = $('.child').closest('.parent');
if (object.length) {
$('#GFG_DOWN').text("Child class name = child"
+ " Parent Class Name = parent" + " Exists");
}
else {
$('#GFG_DOWN').text("Class not exist");
}
});
</script>
</body>
</html>

Kesimpulan

Kelas induk digunakan untuk menerapkan gaya tertentu ke sekelompok elemen HTML. Misalnya, induk jQuery dengan metode kelas memungkinkan kita untuk mencari melalui induk objek jQuery yang mewakili sekumpulan elemen DOM di pohon DOM dan membuat objek jQuery baru dari elemen yang cocok

Artikel yang Direkomendasikan

Ini adalah panduan untuk induk jQuery dengan kelas. Di sini kita membahas definisi, ikhtisar, Bagaimana menemukan induk jQuery dengan kelas? . Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –

Bagaimana menemukan orang tua dengan nama kelas di JavaScript?

Bagaimana cara memeriksa elemen induk memiliki kelas dalam JavaScript?

Bagaimana cara menemukan kelas induk saya?

Bagaimana menemukan div induk di JavaScript?