javascript - 根据数据行和数据列对无序列表进行排序

Question

我有一个带有“ul”(无序列表)的页面，我动态地插入了“li”元素。具有 2 个属性:data-col 和 data-row。这两个属性是任意的，可以是任意值。 (任何实数正数)

有没有办法根据数据行和数据列对所有“li”元素重新排序？它不必是可见的，我只需要“ul”元素及其所有子元素的正确排序。

额外信息:这样做的原因是因为我有一个后端代码需要按顺序读取这个“ul”元素及其子元素，然后填充一个 TABLE 元素。这就像我将多维数组保存到一维数组中。

谢谢:)

Answer 1

您可以使用 jQuery.sort() 对 li 元素列表按行排序，然后按列排序，然后将排序后的列表重新附加到 ul。附加列表替换了之前未排序的版本:

var ul = $('#mylist');

var lis = $('#mylist > li');

lis.sort(

  function(a, b) {
    var ela = $(a);
    var elb = $(b);
    
    var res = +ela.data('row') - elb.data('row');
    
    if (res == 0)   // if rows are the same, sort by column
      res = +ela.data('col') - elb.data('col');
    
    return res;
  }

).appendTo(ul);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="mylist">
  <li data-col="2" data-row="14">14, 2</li>
  <li data-col="2" data-row="1">1, 2</li>
  <li data-col="3" data-row="4">4, 3</li>
  <li data-col="1" data-row="3">3, 1</li>
  <li data-col="1" data-row="4.5">4.5, 1</li>
</ul>