JS：根据数据元素对列表项进行排序答案

【问题标题】：JS: Sort List Items based on data-elementJS：根据数据元素对列表项进行排序
【发布时间】：2013-03-09 10:23:50
【问题描述】：

我想对包含项目的列表进行排序。排序应基于每个项目的数据元素。

奇怪的是，它如果你在本地尝试在你的电脑上（下载我的sortingtest.html），但它在 jfiddle 中无法在线工作，更重要的是在手机上！

您是否知道我的代码有什么问题，或者我可以如何做得更好，以便它也可以在手机上运行？

守则：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    function sortEntries() {    
        var elems = $('#mylist').children('li').remove();
        elems.sort(function(a,b){ 
            return parseInt($(b).data('vote')) > parseInt($(a).data('vote'));
        });
        $('#mylist').append(elems);
    }
    </script>
</head>

<body>

    <ul id="mylist">
        <li data-vote="2">Vote: 2</li>
        <li data-vote="4">Vote: 4</li>
        <li data-vote="1">Vote: 1</li>
        <li data-vote="5">Vote: 5</li>
        <li data-vote="3">Vote: 3</li>
    </ul>

    <a href="#" onClick="sortEntries();">Sort me!</a>

</body>
</html>

JFiddle： http://jsfiddle.net/Q82Qu/

HTML 文件下载：（将文件另存为） https://copy.com/c0Ogb8wLtRrg

提前非常感谢，斯蒂

【问题讨论】：

标签： javascript list sorting

【解决方案1】：

var elems = $('#mylist').children('li').remove();

上面的代码所做的是从文档中删除DOM，这样你就不能将它用作elems.sort(

<html>
<head>
    <script src="js/jquery.js"></script>
    <script>
    function sortEntries()
    {
        var elems = $('#mylist').children('li');
        elems.sort(function(a,b){ 
            return parseInt($(b).data('vote')) > parseInt($(a).data('vote'));
        });
        $('#mylist').append(elems);
    }
    </script>
</head>

<body>

    <ul id="mylist">
        <li data-vote="2">Vote: 2</li>
        <li data-vote="4">Vote: 4</li>
        <li data-vote="1">Vote: 1</li>
        <li data-vote="5">Vote: 5</li>
        <li data-vote="3">Vote: 3</li>
    </ul>

    <a href="#" onClick="sortEntries();">Sort me!</a>

</body>
</html>

【讨论】：

【解决方案2】：

我自己整理了一下：

关键是使用这个排序代码：

elems.sort(function(a,b){ 
    return $(b).attr('data-vote') - $(a).attr('data-vote');
});

【讨论】：