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

Question

我有一个像这样的 HTML

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

View 是这样的

YVariable1 XVariable2 ZVariable3
ZVariable1 YVariable2 XVariable3
XVariable1 ZVariable2 YVariable3

但我需要根据第一个跨度值对结果进行排序，其余的“

”应该相同。意味着单击“按按钮排序”后的结果应如下所示。

 XVariable1 ZVariable2 YVariable3
 YVariable1 XVariable2 ZVariable3
 ZVariable1 YVariable2 XVariable3

我需要在客户端(javascript 或 jQuery)使用它。 我尝试了多种方法，但没有得到我所期望的结果。

我现在有这段代码，并且以类似的方式进行了相同的更改

$('#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

我使用了这段代码。

$('#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