Ketika kita ingin menstyle atau memberi efek sebuah konten dimana konten sebenarnya terdapat istilah orang tua dan anak, jadi seperti keluarga ya, jquery pun mempunyai seperti itu, mungkin dari teman-teman sudah ada yang belajar CSS pasti sudah tidak asing lagi ketika kita ingin mentukan style di CSS, sama ya teman-teman, di jquery pun, kita harus menetukan konten mana yang ingin kita berikan efek, oke untuk lanjut belajar cara mengetahui parent dan children di jquery, simak terus ya teman-teman, jangan kemana-mana terimakasih.
Oke cara mengetahui parent dan children di jquery saya mengambil dari refrensi w3school ya teman-teman, kenapa saya membuat artikel ini karena kadang saya sendiri lupa memberikan yang spesifik untuk menstyle sebuah kontennya, jadi hal yang harus kita pahami yang pertama menurut saya adalah, kita harus tau kita ingin menstyle tag atau konten yang mana, misal tag p, tag p itu ada dimana, apa di dalam tag div turunan langsung, atau di setalah tag span, ingat ya, tag anak harus dalam ruang lingkup sebuah parentnya, seperti itu kira-kira, oke langsung saja untuk cara mengetahui parent dan children di jquery, struktur HTML dan kodenya seperti ini:
1 2 3 4 |
<script> $(document).ready(function(){ $("div").children().css({"color": "red", "border": "2px solid red"}) }); |
jadi ketika saya membuat seperti ini, artinya kita ingin menstyle sebuah anak langsung dari tag div, dan struktur lengkapnya seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Cara Mengetahui Parent dan Children di Jquery</title> <style> .container { display: block; border: 2px solid yellow; color: lightgrey; padding: 15px; margin: 15px; margin: auto; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").children().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body> <div class="container" style="width:500px;">div (Sebagai orang tua dari tag p) <h1>Cara Mengetahui Parent dan Children di Jquery</h1> <p>p (sebagai anak langsung dari tag div) <span>span (grandchild)</span> </p> <p>p (Sebagi anak langsung dari tag div tetapi berbeda style) <span>span (grandchild)</span> </p> </div> </body> </html> |
sekarang kita coba lihat hasilnya:
Semua kena ya teman-teman, oke sekarang saya akan coba memberikan sebuah class di salah satu tag p, kita tinggal menambahkan sebuah parameternya seperti ini
1 |
$("div").children("p.kedua").css({"color":"cyan", "border": "2px solid blue"}) |
Perhatikan children(“p.kedua”)Â ya. oke sekarang bagaimana hasilnya:
tag p yang di bawah sudah berubah ya, jadi seperti itu kita akan lebih spesifik memberikan style terhadap tag atau konten yang kita inginkan, oke saya rasa cukup jelas ya belajar cara mengetahui parent dan children di jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.