按逗号分隔值对 DOM 元素进行排序

Question

给定一个随机排序列表，每个列表都有一个data-combi属性（一个逗号分隔的数字列表），我想以正确的顺序对它们进行排序

<ul class="result">  
  <li data-combi="10,16,24">Combination: 10,16,24</li>
  <li data-combi="8,7,23">Combination: 8,7,23</li>
  <li data-combi="9,16,23">Combination: 9,16,23</li>
  <li data-combi="8,7,24">Combination: 8,7,24</li>  
  <li data-combi="8,16,24">Combination: 8,16,24</li>
  <li data-combi="9,7,23">Combination: 9,7,23</li>
  <li data-combi="10,16,23">Combination: 10,16,23</li>
  <li data-combi="9,7,24">Combination: 9,7,24</li>  
  <li data-combi="9,16,24">Combination: 9,16,24</li>
  <li data-combi="8,16,23">Combination: 8,16,23</li>
  <li data-combi="10,7,23">Combination: 10,7,23</li>
  <li data-combi="10,7,24">Combination: 10,7,24</li>
</ul>

我正在使用此代码对元素进行排序，但是，由于data-combi是一个字符串，因此排序结果在技术上是正确的（即“10”在“9”之前排序，或者“16”在“7”之前排序）但是不是想要的：

var $combiUl = $('ul.result');
var $combiLi = $combiUl.children();

$combiLi.sort(function(a,b){
  var an = a.getAttribute('data-combi');
  var bn = b.getAttribute('data-combi');
  return (an > bn) ? 1 : ((an < bn) ? -1 : 0);
});
// deatch variants and re-append in correct order
$combiLi.detach().appendTo($combiUl);

在我的理想世界中， data-combi属性中的每个逗号分隔值都应被视为数字，而不是字符串，从而导致以下正确排序：

<ul class="expected">
  <li data-combi="8,7,23">Combination: 8,7,23</li>
  <li data-combi="8,7,24">Combination: 8,7,24</li>
  <li data-combi="8,16,23">Combination: 8,16,23</li>
  <li data-combi="8,16,24">Combination: 8,16,24</li>
  <li data-combi="9,7,23">Combination: 9,7,23</li>
  <li data-combi="9,7,24">Combination: 9,7,24</li>
  <li data-combi="9,16,23">Combination: 9,16,23</li>
  <li data-combi="9,16,24">Combination: 9,16,24</li>
  <li data-combi="10,7,23">Combination: 10,7,23</li>
  <li data-combi="10,7,24">Combination: 10,7,24</li>
  <li data-combi="10,16,23">Combination: 10,16,23</li>
  <li data-combi="10,16,24">Combination: 10,16,24</li>
</ul>

如何实现这个目标？ 请考虑我可以有更长或更短的逗号分隔字符串（即10,7,23,12或10,7 ），具体取决于用户选择“混合”的选项。 无论如何，每一行的逗号分隔字符串的长度是一致的并且不会改变（它们总是包含 N 逗号分隔的项目；我不能有一行像10,7,23 ，另一行像9,5和另一行像8,2,24,6 )

请问，有什么想法吗？ 这是显示正在发生的事情的片段

 var $combiUl = $('ul.result'); var $combiLi = $combiUl.children(); $combiLi.sort(function(a,b){ var an = a.getAttribute('data-combi'); var bn = b.getAttribute('data-combi'); return (an > bn)? 1: ((an < bn)? -1: 0); }); // deatch variants and re-append in correct order $combiLi.detach().appendTo($combiUl);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <p>the following "li" are sorted by "data-combi" attribute: since this is a string, the sort is technically right, but this is not what I am trying to achieve</p> <ul class="result"> <li data-combi="10,16,24">Combination: 10,16,24</li> <li data-combi="8,7,23">Combination: 8,7,23</li> <li data-combi="9,16,23">Combination: 9,16,23</li> <li data-combi="8,7,24">Combination: 8,7,24</li> <li data-combi="8,16,24">Combination: 8,16,24</li> <li data-combi="9,7,23">Combination: 9,7,23</li> <li data-combi="10,16,23">Combination: 10,16,23</li> <li data-combi="9,7,24">Combination: 9,7,24</li> <li data-combi="9,16,24">Combination: 9,16,24</li> <li data-combi="8,16,23">Combination: 8,16,23</li> <li data-combi="10,7,23">Combination: 10,7,23</li> <li data-combi="10,7,24">Combination: 10,7,24</li> </ul>

Answer 1

需要以逗号分隔并转换为数字。 if/else 可以清理，但这是基本思想。

 var $combiUl = $('ul.result'); var $combiLi = $combiUl.children(); $combiLi.sort(function(a,b){ var an = a.getAttribute('data-combi').split(',').map(Number); var bn = b.getAttribute('data-combi').split(',').map(Number); var c1 = an[0] - bn[0] var c2 = an[1] - bn[1] var c3 = an[2] - bn[2] if (c1>0) return 1 else if (c1<0) return -1 else if (c2>0) return 1 else if (c2<0) return -1 else if (c3>0) return 1 else if (c3<0) return -1 else return 0 }); // deatch variants and re-append in correct order $combiLi.detach().appendTo($combiUl);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <p>the following "li" are sorted by "data-combi" attribute: since this is a string, the sort is technically right, but this is not what I am trying to achieve</p> <ul class="result"> <li data-combi="10,16,24">Combination: 10,16,24</li> <li data-combi="8,7,23">Combination: 8,7,23</li> <li data-combi="9,16,23">Combination: 9,16,23</li> <li data-combi="8,7,24">Combination: 8,7,24</li> <li data-combi="8,16,24">Combination: 8,16,24</li> <li data-combi="9,7,23">Combination: 9,7,23</li> <li data-combi="10,16,23">Combination: 10,16,23</li> <li data-combi="9,7,24">Combination: 9,7,24</li> <li data-combi="9,16,24">Combination: 9,16,24</li> <li data-combi="8,16,23">Combination: 8,16,23</li> <li data-combi="10,7,23">Combination: 10,7,23</li> <li data-combi="10,7,24">Combination: 10,7,24</li> </ul>

if/else 可以用循环替换

 var $combiUl = $('ul.result'); var $combiLi = $combiUl.children(); $combiLi.sort(function(a,b){ var an = a.getAttribute('data-combi').split(',').map(Number); var bn = b.getAttribute('data-combi').split(',').map(Number); for (let x in an) { if (an[x] > bn[x]) return 1 if (an[x] < bn[x]) return -1 } return 0 }); // deatch variants and re-append in correct order $combiLi.detach().appendTo($combiUl);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <p>the following "li" are sorted by "data-combi" attribute: since this is a string, the sort is technically right, but this is not what I am trying to achieve</p> <ul class="result"> <li data-combi="10,16,24">Combination: 10,16,24</li> <li data-combi="8,7,23">Combination: 8,7,23</li> <li data-combi="9,16,23">Combination: 9,16,23</li> <li data-combi="8,7,24">Combination: 8,7,24</li> <li data-combi="8,16,24">Combination: 8,16,24</li> <li data-combi="9,7,23">Combination: 9,7,23</li> <li data-combi="10,16,23">Combination: 10,16,23</li> <li data-combi="9,7,24">Combination: 9,7,24</li> <li data-combi="9,16,24">Combination: 9,16,24</li> <li data-combi="8,16,23">Combination: 8,16,23</li> <li data-combi="10,7,23">Combination: 10,7,23</li> <li data-combi="10,7,24">Combination: 10,7,24</li> </ul>

Answer 2

更改以下行：

$combiLi.sort(function(a,b){
  var an = a.getAttribute('data-combi');
  var bn = b.getAttribute('data-combi');
  return (an > bn) ? 1 : ((an < bn) ? -1 : 0);
});

对此：

$combiLi.sort(function (a, b) {
    let an = a.getAttribute('data-combi').split(",").join("");
    let bn = b.getAttribute('data-combi').split(",").join("");
    return an - bn;
});

您将能够在没有循环的情况下做到这一点。