Sort List Items based on array

Question

My website generates this List Items retrieving data from database:

<ul id="sortable" class="ui-sortable">
    <li id="2" data-order="2" class="ui-state-default ui-sortable-handle" >Data</li>
    <li id="5" data-order="5" class="ui-state-default ui-sortable-handle" >Data</li>
    <li id="15" data-order="15" class="ui-state-default ui-sortable-handle" >Data</li>
    <li id="23" data-order="23" class="ui-state-default ui-sortable-handle" >Data</li>

</ul>




function loadData(){
            $("#ajaxLoader").show();
            $.ajax({
                type:"POST",
                url:"getItinerari.php"
            }).done(function(itinerario_out){
                //console.log(itinerario_out);
                var route = JSON.parse(itinerario_out);
                for(var i in route){
                    var sortableDiv = '<li id="'+ route[i].it_id +'" data-order="'+ route[i].it_id +'" class="ui-state-default" style="">'+ route[i].itinerario +'<a href="edit.php?id='+ route[i].it_id +'"><img src="../images/file_edit.png" alt="Modifica" width="35px" height="auto"></a><a onclick="return deleteConferme();" href="delete.php?it_id='+ route[i].it_id +'"><img src="../images/delete.png" alt="Elimina" width="35px" height="auto"></a></li>';
                    $("#sortable").append(sortableDiv);

                }


                /****sortable*****/
                $('#sortable').sortable({


                    update: function(event, ui) {
                        var arr = $(this).sortable('toArray');
                        var i, n;
                        var datapost = [];
                        for (i = 0, n = arr.length; i < n; i++) {
                            datapost.push($('#' + arr[i]).data('order'));
                        }

                    $.post('saveSortable.php', {list: datapost}, function (o) {
                        alert(o);
                    });

                    }


                });
                /****sortable*****/





                $("#ajaxLoader").hide();
            });
            //fine done

        }

Those items are sortable so i can get from the DB an array with the last items order.

var sorted = [23, 5, 15, 2];

How can I on the next page load sort the items according by this array? Thanks

Answer 1

You can iterate the array using Array.prototype.forEach(), .appendTo() to append the elements to parent element in order of array elements

var sorted = [23, 5, 15, 2];
sorted.forEach(function(id) {
  $("#" + id).appendTo("#sortable")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sortable" class="ui-sortable">
  <li id="2" data-order="2" class="ui-state-default ui-sortable-handle">Data 2</li>
  <li id="5" data-order="5" class="ui-state-default ui-sortable-handle">Data 5</li>
  <li id="15" data-order="15" class="ui-state-default ui-sortable-handle">Data 15</li>
  <li id="23" data-order="23" class="ui-state-default ui-sortable-handle">Data 23</li>
</ul>