Hai teman-teman semuanya? apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, kali ini pembahasan kita masih seputar method yang ada pada jquery, kali ini kita akan belajar tentang fungsi method wrapall() pada jquery.
Kalau pada tutorial sebelumnya kita telah belajar method wrapinner() yang berfungsi untuk menyisipkan element html pada selektor yang kita tentukan, kali ini kita belajar fungsi wrapall() dimana fungsi dari method ini adalah menambahkan element secara keseluruhan tergantung dari selector yang kita tentukan, mungkin untuk lebih jelasnya kita langsung saja praktek, pertama-tama teman teman silahkan buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> div{background-color: yellow;} </style> </head> <body> <p>Terbaik dan nomor satu</p> <p>terbaik dan nomor satu</p> <button>wrapall() fungsi</button> </body> </html> |
saya membuat 2 buah element p didalam body, lalu saya membuat sebuah tombol yang akan kita berikan efek nantinya, lalu saya mebuat pengaturan css untuk element div, yang nanti akan kita tambahkan dengan fungsi wrap all.
jika sudah silhakan teman-teman tambahkan script jquery berikut ini:
|
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").wrapAll("<div></div>"); }); }); </script> |
pertama kita harus reload library dari jquery yang dapat kita ambil dari jquery.com, setelah itu saya membuat sebuah event click pada button, yang dimana ketika tombol diklik element p akan mengalami efek wrapall(() div, yang berarti semua element p akan terbungus oleh div, jika teman-teman save maka hasilnya akan seperti berikut ini:
Sebelum di klik:
Sesudah diklik tombol :
Hasilnya element p akan terbungkus oleh element div yang dimana element div mempunyai style background color,
Gimana teman-teman? cukup mudah bukan, mungkin untuk tutorial kali ini tentang fungsi method wrapall() pada jquery cukup sampai disini dulu, semoga tutorial yang singkat kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya.
Terima Kasih.