rdmey jQuery: Randomly reorder children elements of selected elements

jQuery: Randomly reorder children elements of selected elements

By Rebecca | December 11, 2007

categories: front-end development, javascript, jquery, plugins

I'm working on a new template for a client, and they asked me to display some list elements in a random order on each page load. I did my Google due diligence, but didn't come up with anything that wasn't slideshow-like -- what I wanted was just something that would show all of the children elements of an element, but in a random order. (In this particular case, the children elements were case case studies.) I was already using jQuery on the page, so I wrote a plugin:

jquery.reorder.js (1k)

Here's the code:

 
$.fn.reorder = function() {
 
  // random array sort from
  // http://javascript.about.com/library/blsort2.htm
  function randOrd() { return(Math.round(Math.random())-0.5); }
 
  return($(this).each(function() {
    var $this = $(this);
    var $children = $this.children();
    var childCount = $children.length;
 
    if (childCount > 1) {
      $children.remove();
 
      var indices = new Array();
      for (i=0;i<childCount;i++) { indices[indices.length] = i; }
      indices = indices.sort(randOrd);
      $.each(indices,function(j,k) { $this.append($children.eq(k)); });
 
    }
  }));
}
 

Thoughts? Suggestions? Let me know.

Tags: jquery |