Question

我正在构建一个有排名列表的页面。列表中的项目与排名顺序号相关联。当用户在页面上的其他位置做出不同的选择选择时，列表中每个项目的订单号都会更改。我一直在四处查看是否有办法在排名顺序号发生变化时自动重新排列列表项。我已经看过一些JQuery .sort（）示例，这些示例需要重新构建DOM元素，看起来我可以使用这些方法应用任何动画。我还查看了JQuery UI 可排序，但这似乎只允许通过拖放进行排序。我真的在寻找像 Isotope Isotope's sorting这样的东西。但是，由于许可问题，我无法利用该框架。要添加挑战，每个列表项都将包含可折叠部分，因此它们的大小不固定。

我原先设想的是这样的事情：

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
    ---

感谢任何建议或示例。谢谢！

Answer 1

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

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

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

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

order: 0是默认值

Answer 2

新答案

我没有彻底阅读你的问题，抱歉。这是另一个简单的方法，它移动位置绝对和margin-top的项目，但是这些项目在列表容器之外，所以它并不理想。

＆＃13;

List<Attachment> AttachmentList = new List<Attachment>();
JArray a = JArray.Parse(jsonString);

foreach (JObject o in a.Children<JObject>())
{
    Attachment newAttachment = new Attachment
    {
       WriteUpID = (int)o["WriteUpID"],
       InitialScanID = (int)o["InitialScanID"],
       //etc, do this for all Class items. 
    }
    AttachmentList.Add(newAttachment);
}
//Then change the AttachmentList to an array when you're done adding Attachments
Attachment[] attachmentArray = AttachmentList.ToArray();

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

原始回答

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

2 个答案: