Question

我的网站生成此列表项从数据库中检索数据：

<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

        }

这些项目是可排序的，所以我可以从数据库获得一个包含最后项目顺序的数组。

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

如何在下一页上加载按此数组排序的项目？感谢

Answer 1

您可以使用Array.prototype.forEach()，.appendTo()迭代数组，以按数组元素的顺序将元素追加到父元素

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>

基于数组对列表项进行排序

1 个答案: