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

Question

Given a random sorted list, each with a data-combi attribute (a comma separated list of numbers), I'd like to sort them in the right order

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

I'm using this code to sort elements but, since data-combi is a string, the sort result is technically right (ie. "10" is sorted before "9", or "16" is sorted before "7") but not the wanted one:

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

In my ideal world, each comma separated value in the data-combi attribute should be treated as number, not as a string, thus resulting in the following correct sort:

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

How to achieve this goal? Please consider that I can have longer or shorter comma-separated strings (ie. 10,7,23,12 , or 10,7 ) depending which options the user choose to "mix". Anyway, the length of comma-separated string for each row is consistent and does not change (they contains always N comma-separated items; I cannot have one row like 10,7,23 , another like 9,5 and another like 8,2,24,6 )

Please, any idea? Here is the snippet showing what's going on

 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

Need to split on the commas and convert to numbers. The if/else could be cleaned up, but this is the basic idea.

 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>

The if/else could be replaced with a loop

 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

Change the following lines:

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

to this:

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

You will be able to do it without loops.