Sort divs in jQuery based on attribute data-sort

Question

If I have several divs    lt div data-sort  1  gt div1 lt  div gt   lt div data-sort  4  gt div4 lt  div gt   lt div data-sort  8  gt div8 lt  div gt   lt div data-sort  12  gt div12 lt  div gt   lt div data-sort  19  gt div19 lt  div gt    And I dynamically create the divs    lt div data-sort  14  gt div1 lt  div gt   lt div data-sort  6  gt div1 lt  div gt   lt div data-sort  9  gt div1 lt  div gt    How can I get them to just sort into the divs already loaded in order  without having to reload all of the divs   I think that I would need to build an array of the data-sort values of all of the divs on the screen  and then see where the new divs fit in  but I am not sure if this is the best way

User · Answer

I used this to sort a gallery of images where the sort array would be altered by an ajax call. Hopefully it can be useful to someone.

_x000D_

var myArray = ['2', '3', '1'];_x000D_
var elArray = [];_x000D_
_x000D_
$('.imgs').each(function() {_x000D_
    elArray[$(this).data('image-id')] = $(this);_x000D_
});_x000D_
_x000D_
$.each(myArray,function(index,value){_x000D_
   $('#container').append(elArray[value]); _x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>_x000D_
<div id='container'>_x000D_
   <div class="imgs" data-image-id='1'>1</div>_x000D_
   <div class="imgs" data-image-id='2'>2</div>_x000D_
   <div class="imgs" data-image-id='3'>3</div>_x000D_
</div>

_x000D_

Fiddle: http://jsfiddle.net/ruys9ksg/

User · Answer

Answered the same question here    https   stackoverflow com a 23298715 1007358   To repost   After searching through many solutions I decided to blog about how to sort in jquery   In summary  steps to sort jquery  array-like  objects by data attribute      select all object via jquery selector convert to actual array  not array-like jquery object  sort the array of objects convert back to jquery object with the array of dom objects   Html   lt div class  item  data-order  2  2 lt  div   lt div class  item  data-order  1  1 lt  div   lt div class  item  data-order  4  4 lt  div   lt div class  item  data-order  3  3 lt  div   Plain jquery selector      item         lt div class  item  data-order  2  2 lt  div     lt div class  item  data-order  1  1 lt  div     lt div class  item  data-order  4  4 lt  div     lt div class  item  data-order  3  3 lt  div     Lets sort this by data-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               gt  getSorted   item    data-order        lt div class  item  data-order  1  1 lt  div     lt div class  item  data-order  2  2 lt  div     lt div class  item  data-order  3  3 lt  div     lt div class  item  data-order  4  4 lt  div     See how getSorted   works   Hope this helps

User · Answer

Use this function     var result      div   sort function  a  b           var contentA  parseInt    a  data  sort           var contentB  parseInt    b  data  sort           return  contentA  lt  contentB    -1    contentA  gt  contentB    1   0                 mylist   html result     You can call this function just after adding new divs   If you want to preserve javascript events within the divs  DO NOT USE html replace as in the above example   Instead use     targetSelector  sort function  a  b                  appendTo  container

User · Answer

I made this into a jQuery function   jQuery fn sortDivs   function sortDivs             gt  div   this 0   sort dec sort  appendTo this 0        function dec sort a  b   return    b  data  sort     lt     a  data  sort      1   -1        So you have a big div like   boo  and all your little divs inside of there          boo   sortDivs      You need the    1   -1  because of a bug in Chrome  without this it won t sort more than 10 divs  http   blog rodneyrehm de archives 14-Sorting-Were-Doing-It-Wrong html

[jquery] Sort divs in jQuery based on attribute 'data-sort'?

Examples related to jquery

Examples related to jquery-selectors

Examples related to javascript

Examples related to jquery-ui-sortable