从数组中按 id 对 <li> 元素进行排序

Posted 2023-05-08

【中文标题】从数组中按 id 对 <li> 元素进行排序

【英文标题】：Order <li> elements by id from array

【发布时间】：2021-10-10 04:55:30

【问题描述】：

我使用 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>

到目前为止，我已经找到/想出了：

$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);
);

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

【参考方案1】：

最简单的方法是在加载页面时让 PHP 处理您的订单。如果不可能，因为你只会有一个数组中的值，它可以通过 jQuery 来完成。

你有 jQuery 代码到 html/php 页面吗？ 然后您可以执行以下操作：

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

我不建议这样做，因为我最好不要在我的 HTML/PHP 中使用 JS/jQuery。