按逗号分隔值对 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 这样的另一行）

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

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

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