javascript - Client side Sorting inside < li> tag values -

i have html 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 this

yvariable1 xvariable2 zvariable3 zvariable1 yvariable2 xvariable3 xvariable1 zvariable2 yvariable3 

but need sort result based on first span value, remaining "< li>" should same. means result should following on click of "sort button".

 xvariable1 zvariable2 yvariable3  yvariable1 xvariable2 zvariable3  zvariable1 yvariable2 xvariable3 

i need in client side (javascript or jquery). have tried in multiple ways, didn't i'm expecting.

this code have now, , 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()); }); 

i used 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 jsfiddle