Swap Elemen HTML Menggunakan jQuery Berdasarkan class

Pada tulisan sebelumnya yaitu Swap HTML Element jQuery by id telah dijelaskan mengenai cara untuk menukar posisi elemen html dengan menggunakan jQuery berdasarkan id dari tag HTML. Pada tulisan kali ini akan dijelaskan mengenai cara menukar posisi dari elemen HTML dengan memanfaatkan class yang terdapat pada tag HTML. Adapun peralatan yang digunakan masih sama dengan peralatan pada kegiatan sebelumnya yaitu jquery-1.9.1.

Pada kegiatan kali ini karena saya minim pengalaman dalam coding javascript/jQuery maka mungkin sajian source code yang ditampilkan akan terasa aneh untuk para master js/jquery sekalian. Logika dari proses yang akan dilakukan adalah menjadikan elemen pertama dari tag html berdasarkan class yang akan digunakan sebagai patokan. Setelah didapatkan elemen patokannya berikutnya adalah tukar kode html dari elemen tersebut dengan elemen berikutnya (dibawahnya). Untuk lebih memberikan gambaran bisa dilihat pada potongan program berikut.

potongan program file html

<div>
	<div class="classtest">
		<div id="div1">
			<p style="color:red;">1. element atas</p> 			
		</div>
	</div>
	<div class="classtest">
		<div id="div2">
			<p style="color:blue;">2. element bawah</p>
		</div>
	</div>
</div>

potongan program jquery

$(document).ready(function(){
	$("button").click(function(){				
		$(".classtest:eq(0)").before($(".classtest:eq(1)"));
	});
});

Demikian tulisan ini saya akhiri, semoga bisa membantu. Jika apa yang saya sajikan belum memenuhi kriteria best practice mohon kiranya koreksi dari para master sekalian. Sampai bertemu di tulisan berikutnya Menukar elemen HTML menggunakan jQuery berdasarkan tag HTML.

source: source jquery swap element by class

penting untuk diketahui:
jquery html
jquery selector