Sorting a list of items in jQuery

Question

I have a list of elements that I get using jQuery.

var $self = $(this); var $fields = $('.identifier-controls', $self); 

This list is a list of items that need to be manipulated in some way when displaying the control. Each item in the $ fields list contains a data attribute called "order-order". This attribute tells me in what order I should arrange the elements in the control (requirements ah). The order does not have to be in a direct linear order (this means that the first control can have an attribute value of 10, and the next 15 and the next 17, etc. They just have to appear in ascending order. Way to achieve this? All ways, with which I may encounter seem a bit complicated.

Answer 1

Try the following:

 $(function(){ var $self = $(this); var sortedList = $('.identifier-controls', $self).sort(function(lhs, rhs){ return parseInt($(lhs).attr("data-order"),10) - parseInt($(rhs).attr("data-order"),10); }); }); 

the sortedList variable now has sorted elements.

Answer 2

Something like:

 $fields.sort(function(a, b) { return a.getAttribute('data-order') > b.getAttribute('data-order'); }).appendTo($fields.parent()); 

Fiddle: http://jsfiddle.net/gCFzc/

Answer 3

After searching for many solutions, I decided to create a blog on how to sort in jquery [1]. So the steps for sorting jquery are "massive" objects by data attribute ...

• select all objects using jquery selector
• convert to actual array (jquery object not like array)
• sort an array of objects
• convert back to jquery object with array of dom objects

Html

  <div class = "item" data-order = "2"> 2 </div>
 <div class = "item" data-order = "1"> 1 </div>
 <div class = "item" data-order = "4"> 4 </div>
 <div class = "item" data-order = "3"> 3 </div> 

Plain jquery selector

  > $ ('. item')
 [<div class = "item" data-order = "2"> 2 </div>,
  <div class = "item" data-order = "1"> 1 </div>,
  <div class = "item" data-order = "4"> 4 </div>,
  <div class = "item" data-order = "3"> 3 </div>
 ] 

Allows you to sort in order

  function getSorted (selector, attrName) {
     return $ ($ (selector) .toArray (). sort (function (a, b) {
         var aVal = parseInt (a.getAttribute (attrName)),
             bVal = parseInt (b.getAttribute (attrName));
         return aVal - bVal;
     }));
 } 

  > getSorted ('. item', 'data-order')
 [<div class = "item" data-order = "1"> 1 </div>,
  <div class = "item" data-order = "2"> 2 </div>,
  <div class = "item" data-order = "3"> 3 </div>,
  <div class = "item" data-order = "4"> 4 </div>
 ] 

Hope this helps!

[1] http://blog.troygrosfield.com/2014/04/25/jquery-sorting/

Answer 4

Sorting an insert will be a fairly straightforward way to do it.

Or, being a bit disruptive, you can use the JavaScript engine to do this:

 var $fields, $container, sorted, index; $container = $('body'); $fields = $("div[data-order]", $container); sorted = []; $fields.detach().each(function() { sorted[parseInt(this.getAttribute("data-order"), 10)] = this; }); sorted.forEach(function(element) { $container.append(element); }); 

Live example:

 (function($) { var $fields, $container, sorted, index; $container = $('body'); $fields = $("div[data-order]", $container); sorted = []; $fields.detach().each(function() { sorted[parseInt(this.getAttribute("data-order"), 10)] = this; }); sorted.forEach(function(element) { $container.append(element); }); })(jQuery); 

 <div data-order="30">30</div> <div data-order="40">40</div> <div data-order="10">10</div> <div data-order="20">20</div> <div data-order="1">1</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Here's how it works:

• We get the container and get fields from it.

• Create an empty array. Remember that JavaScript arrays are not really arrays , and they are essentially sparse.

• Separate the fields, then scroll through them, getting the data-order from the DOM element and adding the DOM element to the array at this position. This assumes that the data-order values ​​are unique.

• Once we have an array of raw DOM elements, we scroll through it using forEach , adding them to the container. I did not use jQuery.each because jQuery.each will call back even for nonexistent array indexes, which if your data-order values ​​are pretty sparse can be a problem. forEach iterates over entries in numerical order, skipping those that do not exist.