Order Unordered Group of Div's by ID or Class with jQuery

Order Unordered Group of Div's by ID or Class with jQuery

Is it possible to order a group of Div's by id or class using jQuery? Here's my code:

    
          African Dolls    
    
          Anklets    
    
          Bracelets    
    
          Children's Jewelry    
    
          Clearance    
    
          Cross Necklaces    
  
  

I know the code is kind messed up but WP E-Commerce is generating it and won't allow me to order it the way I want. Any thoughts?

Thanks.

Answer by JohnP for Order Unordered Group of Div's by ID or Class with jQuery

I came up with a rough draft. This code can most likely be cleaned up a lot, but here you go

Demo : http://jsfiddle.net/3paUL/

$('#sort').click(function() {      var ids = [];      var divs = {};      $('#product_categories div.wpsc_categorisation_group').each(function() {          var numPart = parseInt($(this).attr('id').substr($(this).attr('id').lastIndexOf('_') + 1));          ids.push(numPart);          divs[numPart] = $(this);        });      ids.sort(sortNumber);      $('#product_categories').html('');        for (id in ids) {          $('#product_categories').append(divs[ids[id]]);      }  });    function sortNumber(a, b) {      return a - b;  }  

How it works : It looks at the IDs of the DIV elements inside and sorts them. Since all your DIV elements follow the pattern of an _ and a number, I take off that number and use that as the index.

Answer by Marcus Ekwall for Order Unordered Group of Div's by ID or Class with jQuery

I would use .sort and so something like this:

var ids = $(".wpsc_categorisation_group").map(function(){      return parseInt(this.id.replace('categorisation_group_',''));  }).toArray().sort();    $.each(ids, function(){      $('#categorisation_group_'+this).prependTo("#product_categories");  });  

Check my test case on jsFiddle;

Answer by Emre Erkan for Order Unordered Group of Div's by ID or Class with jQuery

You can use sortElements plug-in: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('.wpsc_categorisation_group').sortElements(function(a, b){      return parseInt(a.id.replace('categorisation_group_', ''), 10) > parseInt(b.id.replace('categorisation_group_', ''), 10) ? 1 : -1;  });  

here you can find jsFiddle test case

Answer by Makram Saleh for Order Unordered Group of Div's by ID or Class with jQuery

Here you go!

function orderDivs()  {      var divs = [];      $("#product_categories .wpsc_categorisation_group").each(function() {          divs.push($(this));      });      // sort using a custom compare function      divs.sort(byID);      // empty the old contents      $("#product_categories").empty();      // put the ordered divs back in the same container      for (var i=0; i < divs.length; i++) {          $("#product_categories").append(divs[i]);      }  }  function byID(a, b)  {      // extract number from id      var a_id_num = parseInt($(a).attr("id").split("_")[2], 10);      var b_id_num = parseInt($(b).attr("id").split("_")[2], 10);      // compare with the other      if(a_id_num > b_id_num) {          return 1;      } else {          return 0;      }  }    $(function() {      // ready, go!      orderDivs();  });  

A working sample on JSFiddle: http://jsfiddle.net/PnDLw/

Answer by mikesir87 for Order Unordered Group of Div's by ID or Class with jQuery

Although there's a few others already up, I'll throw this up too! This one uses regular expressions to strip out the number.

var container = $("#product_categories");  var ele = container.children("div.wpsc_categorisation_group");    ele.detach().sort(function (a, b) {      var a = $(a).attr('id').match(/\d+/);      var b = $(b).attr('id').match(/\d+/);      return a-b;  });  container.append(ele);  

Hope it helps!

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72