Recovering DOM objects ordered by a criterion

Question

It would be able to capture all the DOM objects and sort them by a set of rules. For example, in the code below the attributes data-Gs-x="0" data-Gs-y="0" define the position (x, y) on screen. I would like to take the elements considering the order of the coordinates.

The return should follow the order:

1. Object (0,0)
2. Object (4,0)
3. Object (8,0)
4. Object (0,4)
5. Subject matter (4,4)
6. Subject matter (8,4)
7. Object (0,8)
8. Subject matter (4,8)

<div data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
<div data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
<div data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
<div data-gs-x="0" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
<div data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>
<div data-gs-x="8" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> </div>

Answer 1

I decided a little differently from my colleagues. I thought it was simpler. I created this Jsfiddle also.

var $obj = $('.testGrid');

$obj.find('.test').sort(function(a, b) {
    return a.dataset.gsX - b.dataset.gsX;
  })
  .sort(function(a, b) {
    return a.dataset.gsY - b.dataset.gsY;
  })
  .appendTo($obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="testGrid">
  <div class="test" data-gs-x="8" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 6</div>
  <div class="test" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 1</div>
  <div class="test" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 5</div>
  <div class="test" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide">3 </div>
  <div class="test" data-gs-x="0" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 4</div>
  <div class="test" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 2</div>

</div>

Answer 2

Dude,

i didn’t understand what you meant by order of coordinates, but I did an example of how you can customize the ordering of an array.

HTML

<div data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
80
</div>
<div data-gs-x="0" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
04
</div>
<div data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
44
</div>
<div data-gs-x="8" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
84
</div>

Javascript

function compare(a, b){
    if($(a).attr('data-gs-x') < $(b).attr('data-gs-x')){
        return -1;
    }else if($(a).attr('data-gs-x') == $(b).attr('data-gs-x')){
        if($(a).attr('data-gs-y') < $(b).attr('data-gs-y')){
            return -1;
        }else if($(a).attr('data-gs-y') == $(b).attr('data-gs-y')){
            return 0
        }else{
            return 1;
        }
    }else{
        return 1;
    }
}


$(document).ready(function(){
    data = $('.grid-stack-item');
    data.sort(compare);
    $(this.body).append('<div>Resultado</div>')
    data.each(function(){
        $(document.body).append('<div>'+$(this).attr('data-gs-x')+''+$(this).attr('data-gs-y')+'</div>');
    })
});

Basically you should create a function by receiving two parameters and compare them the way it is needed. So when calling the function data_array.sort(funcao_compara) the rules you set will be used.

I made this example by sorting first by the values of x and then by the values of y.

I created this Jsfiddle also