客户端在<li>标签值内排序

Question

I have a HTML like this

<div>
<ul id="ulId">
    <li id="liId1">
        <span id="spn1-Li1">YVariable1</span>
        <span id="spn2-Li1">XVariable2</span>
        <span id="spn3-Li1">ZVariable3</span> 
    </li>
    <li id="liId2">
        <span id="spn1-Li2">ZVariable1</span>
        <span id="spn2-Li2">YVariable2</span>
        <span id="spn3-Li2">XVariable3</span> 
    </li>
    <li id="liId3">
        <span id="spn1-Li3">XVariable1</span>
        <span id="spn2-Li3">ZVariable2</span>
        <span id="spn3-Li3">YVariable3</span> 
    </li>
</ul>
</div>

The view has like this

YVariable1 XVariable2 ZVariable3
ZVariable1 YVariable2 XVariable3
XVariable1 ZVariable2 YVariable3

But I need to sort the result based on the first span value, the remaining "< li>" should be same. Means the result should be as following on click of "sort by button".

 XVariable1 ZVariable2 YVariable3
 YVariable1 XVariable2 ZVariable3
 ZVariable1 YVariable2 XVariable3

I need this in client side (javascript or jQuery). I have tried in multiple ways, But I didn't get what I'm expecting.

This code I have now, and same altered similar ways

$('#btnOrderBy').click(function () {
    var data = [];
    $('#ulId li').each(function (item, value) {
        $('span', value).each(function (i, v) {
            data.push($(this).text());
        });
    });
    console.log(data.sort());
});

Answer 1

I used this code.

$('#ulId').html($("#ulId li").sort(asc_sort));
function asc_sort(a, b){
    return ($(b).find('span:first-child').text()) < ($(a).find('span:first-child').text()) ? 1 : -1;    
}

link to jsFiddle

Answer 2

This is a duplicate of What is the easiest way to order a <UL>/<OL> in jQuery? :

var items = $('li').get();
items.sort(function(a,b){
  var keyA = $(a).text();
  var keyB = $(b).text();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var ul = $('ul');
$.each(items, function(i, li){
  ul.append(li);
});

http://jsfiddle.net/kEB7p/

Answer 3

You can do it like this if you want to keep the LI 's in their position and only sort the spans

First store the sorting order

var orderArr = [];
$('#ulId span:nth-child(1)').sort(function(a,b){
    var aa = $(a).text();
    var bb = $(b).text();
    orderArr.push(aa < bb ? -1 : aa > bb ? 1 : 0);
});

Then you want to get the spans from each LI , put them in an array, and sort them

var y = 0;
var spans = $('#ulId li').map(function(){
   return $('span',this); // or $(this).find('span')
}).sort(function(){ return orderArr[y++]; });

Then you can loop through and append them to the each LI

$('#ulId li').each(function(i,v){
   $(v).append(spans[i]);
});

FIDDLE

Or if you want to sort the li's based on the span you can do this

$('#ulId li').sort(function(a,b){
    var aa = $(a).find('span:first-child').text();
    var bb = $(b).find('span:first-child').text();
    return aa<bb ? -1 : aa>bb ? 1 : 0;
}).appendTo('#ulId');

FIDDLE