根据数字排序顺序更新自动重新排列HTML列表

Automatically re-arrange HTML list base on numeric sort order updates

本文关键字：新排列 排列 列表 HTML 数字 排序 顺序 更新      更新时间：2023-09-26

我正在构建一个有排名列表的页面。列表中的项目与等级顺序编号相关联。随着用户在页面上的其他位置做出不同的选择，列表中每个项目的订单号都会发生变化。我一直在四处寻找，看看是否有一种方法可以在列表项目的排名顺序发生变化时自动重新排列它们。我看了一些JQuery.sort（）示例，这些示例需要重新构建DOM元素，而且我似乎可以使用这些方法应用任何动画。我还研究了JQueryUI的可排序性，但它似乎只允许通过拖放进行排序。我真的在寻找类似同位素分类的东西。然而，由于许可问题，我无法利用该框架。为了增加挑战，每个列表项都将包含可折叠的部分，因此它们的大小不会固定。

我最初设想的是这样的东西：

Initial HTML:
    <ul class="sortedlist">
        <li class="1">A</li>
        <li class="2">B</li>
        <li class="3">C</li>
        <li class="4">D</li>
        <li class="5">E</li>
    </ul>
Browser:
    ---
     A
    ---
     B 
    ---
     C
    ---
     D
    ---
     E
    ---
Updated HTML:
    <ul class="sortedlist">
        <li class="4">A</li>
        <li class="1">B</li>
        <li class="5">C</li>
        <li class="2">D</li>
        <li class="3">E</li>
    </ul>
Updated Browser:
    ---
     B
    ---
     D 
    ---
     E
    ---
     A
    ---
     C
    ---

欢迎提出任何建议或举例。谢谢

如果您想对它们进行排序。这可以通过CSS属性"disply: flex"进行管理。试试这个

ul {display: flex; flex-direction: column;}

这会使列表项垂直向下。-使用flex后，可以使用order属性。

ul > li:nth-child(0) {order: 2;}

order: 0是默认值

新答案

对不起，我没有仔细阅读你的问题。这是另一种简单的方法，它移动具有绝对位置和页边空白顶部的项目，但这些项目在列表容器之外，所以这并不理想。

function sortList() {
  var list = document.getElementById("listToSort");
  
  var item = list.firstElementChild;
  while(item) {
  	item.style.marginTop = ((parseFloat(item.className) - 1) * 20) + "px";
    item = item.nextElementSibling;
  }
  
}
sortList();
// Testing example below
var item1 = document.getElementById("listToSort").getElementsByClassName("1")[0];
var item2 = document.getElementById("listToSort").getElementsByClassName("2")[0];
item1.className = "2";
item2.className = "1";
setTimeout(function() {sortList();},1500);
#listToSort>li {
  position: absolute;
  -webkit-transition: all 0.7s ease-out;
     -moz-transition: all 0.7s ease-out;
      -ms-transition: all 0.7s ease-out;
       -o-transition: all 0.7s ease-out;
          transition: all 0.7s ease-out;
}
<ul id="listToSort" class="sortedlist">
  <li class="4">A</li>
  <li class="1">B</li>
  <li class="5">C</li>
  <li class="2">D</li>
  <li class="3">E</li>
</ul>

原始答案

这里有一个javascript解决方案，它通过将得分最低的项目移动到最后，然后移动到得分第二低的项目等，迭代所有列表项目，直到它们按顺序排列。

function sortList() {
  var list = document.getElementById("listToSort");
  var listItem = list.firstChild;
  var currentScore = 1;
  while (true) {
    if (listItem.className == currentScore) {
      currentScore++;
      list.appendChild(listItem);
      listItem = list.firstChild;
    } else if (listItem.nextSibling) listItem = listItem.nextSibling;
    else break;
  }
}
sortList();
<ul id="listToSort" class="sortedlist">
  <li class="4">A</li>
  <li class="1">B</li>
  <li class="5">C</li>
  <li class="2">D</li>
  <li class="3">E</li>
</ul>

相关文章：