jQuery .swap() Plugin

.swap(index1, index2)

Description Swaps the elements within a jQuery object. Download the ZIP File with Source and Demo


  • index1: The first index of the jQuery object being swapped
  • index2: The second index of the jQuery object being swapped
Note: The first index starts at 0.


Boxes of class "box" selected with jQuery via $(".box") are displayed with their respective index number. Choose two indexes to swap, and then click the swap button. Click "Toggle Index 0" to see that Index 0 will be toggled regardless of an element's starting position, indicating the elements of the jQuery object have indeed been swapped. *** Please note that the .swap() method does not physically swap the element position styles, only their abstract position within the jQuery object. The index-based style positioning is handled by the fakeFloat method on line 34.
Click to toggle source code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="swap.jquery.js"></script>
<style type="text/css">
body{background-color: #FFFFFF;}
.box{width: 30px;height: 30px;border: 1px solid #000000;position: absolute; top: 10px;}
#hideToggle{margin-top: 50px;}
button{margin-top: 10px;margin-left: 10px;clear: both;float: left;width: 150px;height: 30px;}
#firstIndex{clear: both;float: left;margin-left: 10px;}
#secondIndex{float: left;margin-left: 10px;}
#box1{background-color: #FFFF00;}
#box2{background-color: #CCCCCC;}
#box3{background-color: #009999;}
#box4{background-color: #FF0000;}
<script type="text/javascript">
  var boxes = $(".box");
  $(boxes).fakeFloat({margin: 10, offset: 20});
    var index1 = $('input:radio[name=index1]:checked').val();
    var index2 = $('input:radio[name=index2]:checked').val();
    boxes = $(boxes).swap(index1,index2);
    $(boxes).fakeFloat({margin: 10, offset: 20, speed: 300}).each(function()
    $("#swapTrigger").attr('disabled', 'disabled');
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
  <button type="button" id="hideToggle">Toggle index 0</button>
  <button type="button" id="swapTrigger">Swap</button>
  <div id="firstIndex">
  <b>Swap Index</b><br />
  <input type="radio" name="index1" value="0" />0<br />
  <input type="radio" name="index1" value="1" />1<br />
  <input type="radio" name="index1" value="2" />2<br />
  <input type="radio" name="index1" value="3" />3<br />
  <div id="secondIndex">
  <b>With Index</b><br />
  <input type="radio" name="index2" value="0" />0<br />
  <input type="radio" name="index2" value="1" />1<br />
  <input type="radio" name="index2" value="2" />2<br />
  <input type="radio" name="index2" value="3" />3<br />

Bugs? Comments? Leave your feedback below!

August 16, 2010
About the Author:

Joseph is the lead developer of Vert Studios Follow Joseph on Twitter: @Joe_Query
Subscribe to the blog: RSS
Visit Joseph's site: joequery.me