Pada kegiatan sebelumnya Menukar Elemen HTML Menggunakan jQuery Berdasarkan class telah dijelaskan mengenai cara untuk menukar posisi elemen html berdasarkan class yang menempel pada tag html yang akan ditukar. Pada kegiatan kali ini proses tukar-menukar tidak dilakukan dengan menggunakan id atau class tetapi berdasarkan tag html saja. Seperti pada kegiatan sebelumnya kegiatan ini masih tetap menggunakan jquery-1.9.1.
Logika dari kegiatan kali ini adalah kita ambil tag yang akan kita tukar elemennya untuk kemudian tampung dalam sebuah variable. Setelah itu kita tukar kode HTML dari elemen yang akan kita tukar tersebut pada variable yang menjadi penampung tersebut. Untuk lebih jelas bisa dilihat pada contoh potongan program dibawah.
potongan program html
<div> <div> <div> <p style="color:red;">1. element atas</p> </div> </div> <div> <div> <p style="color:blue;">2. element bawah</p> </div> </div> </div>
potongan program jquery
$(document).ready(function(){
$("button").click(function(){
var item = new Array();
var htmlTemp = new Array();
var temp;
$("p").each(function(){
temp = $(this).parent();
item.push(temp);
htmlTemp.push(temp.html());
});
item[0].html(htmlTemp[1]);
item[1].html(htmlTemp[0]);
});
});
Demikian tulisan ini saya akhiri semoga bisa menjadi inspirasi.
source: source swap element html by tag
inspirasi:
jQuery each method
jQuery parent method
