Retrieving DOM objects sorted by a criteria

Question

Retrieving DOM objects sorted by a criteria

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

It would capture all 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 get the elements considering the order of the coordinates.

The return should follow the order:

Object (0,0)

Object (4.0)

Object (8,0)

Object (0,4)

Object (4.4)

Object (8,4)

Object (0,8)

Object (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>

jquery

asked by anonymous 10.06.2016 / 15:37

2 answers

Swift - how do I find the screen size of the user's device? Random selections with PHP and MySQL

score 2 · Answer 1

I resolved a little differently from my colleagues. I thought it was simpler. I've created this JSFiddle as well.

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><divclass="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>

score 0 · Answer 2

Dude,

I did not understand what you meant by coordinate order, 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 taking two parameters and comparing them in whatever way is required. So when calling the data_array.sort(funcao_compara) function the rules you set will be used.

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

I've created this JSFiddle as well