Menukar Posisi Element dengan jQuery Berdasarkan id

Tulisan kali ini terinspirasi dengan project yang sedang kami hadapi dimana kita harus membuat dynamic form dan posisi dari element tersebut bisa ditukar (swap) ke atas (move up) atau ke bawah (move down). Setelah googling beberapa saat akhirnya dari link ini how do i move an html element in jquery aku dapat pencerahan. Karena yang digunakan sebagai patokan adalah id pada tag html yang akan ditukar maka teknik yang akan digunakan pun sederhana, yaitu teknik menukar (swap) seperti yang diajarkan pada saat kuliah dulu (matkul algoritma).

Pada kegiatan kali ini peralatan tempur yang akan digunakan adalah jquery-1.9.1 dan browser Mozilla Firefox for Ubuntu 24.0 dengan gEdit sebagai editornya (bisa pakai notepad, dll). Adapun source dari hasil kegiatan ini bisa di download pada link paling bawah dari tulisan ini. Untuk lebih memberikan sedikit gambaran maka saya akan menampilkan potongan program yang terdiri dari:

potongan program file html

     <div>
          <div id="id1">
               <p style="color:red;">1. element atas</p> 			
          </div>
          <div id="id2">
                <p style="color:blue;">2. element bawah</p>
          </div>
     </div>

potongan program jquery

var i = 0;
$(document).ready(function(){
     $("button").click(function(){
          if(i%2 == 0){
               $('#id1').before($('#id2'));
          }else{
               $('#id1').after($('#id2'));
          }	
          i++;
      });
});

Demikian kegiatan kali ini saya akhiri, semoga bisa membantu. Sampai ketemu di tulisan berikutnya Menukar Elemen HTML menggunakan jQuery berdasarkan class.

source: source swap element by id