按 id 从数组中排序 <li> 个元素

Question

我使用 Jquery 的 sortable() 创建了一个保存到数据库的数组。该数组包含 ul 中所有 li 项目的 li id。它基于拖放功能。

<script>
      $(document).ready(function () {
          $('ul').sortable({
              axis: 'y',
              stop: function (event, ui) {
                  let data = $(this).sortable('toArray');
                  $('span').text(data);
                  $("#HiddenSortOrder").val(JSON.stringify(data))
                  console.log(data);
              }
          });
      });
</script>

它生成的数组如下所示：

["13","14","16","15","","1","2","3","4","5","6","7","8","9","10","11","12","17","18","19","20","21","22","23","24","25","26","27","46","52",""]

我正在尝试使用此数组来设置另一页上列表的顺序。 li 项如下所示：

<li class="ui-state-default" id="1"><a href="linkOfSomething.php">nameOfSomething</a></li>

到目前为止，我 found/come 有：

$data[] = $sortOrderArray;
    <script>
        var sorted = $data[];
        sorted.forEach(function(id) {
            $("#" + id).appendTo("#sortable")
        })
    </script>

或类似的东西：

array.forEach(function(item) {
  var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
});

但是我非常不确定如何正确实施它。如果我一开始就走在正确的轨道上。有什么建议吗？

Answer 1

最简单的方法是让 PHP 在加载页面时处理您的订单。如果不可能，因为您只有数组中的值，所以可以通过 jQuery.

来完成

html/php 页面中是否有 jQuery 代码？然后你可以这样做：

    <script>
        var sorted = <?= $sortOrderArray; ?>
        sorted.forEach(function(id) {
            $("#" + id).appendTo("#sortable")
        })
    </script>

我不会推荐这个，因为我最好不要 JS/jQuery 在我的 HTML/PHP.

按 id 从数组中排序 <li> 个元素

Order <li> elements by id from array

html

php

arrays

jquery

jquery-ui-sortable