Question

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

奇怪的是，如果你在你的电脑上尝试有效（下载我的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

提前非常感谢，扁钢

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

Answer 2

我已经把它整理出来了：

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

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

JS：基于data-element对列表项进行排序

2 个答案: