JS:基于数据元素排序列表项

JS: Sort List Items based on data-element

本文关键字：元素 排序 列表 数据 于数据 JS      更新时间：2023-09-26

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

奇怪的是，它工作，如果你尝试它在本地在你的pc上(下载我的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-File下载:(另存为)https://copy.com/c0Ogb8wLtRrg

提前感谢，部件

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>

我已经自己整理好了:

关键是使用以下排序代码:

elems.sort(function(a,b){ 
    return $(b).attr('data-vote') - $(a).attr('data-vote');
});
相关文章：