Javascript 按id值对li排序

单击排序按钮后，我需要使用

LI

标记的ID值对列表进行升序或降序排序。如果是升序，则必须按降序排序，反之亦然

例如：

巴黎
希腊
伦敦

我需要在不使用jQuery tinysort中的

tsort

函数的情况下对其进行排序。

---

我如何才能做到这一点？

不需要jQuery时不要使用它

function sortList() {
    sortList.direction = sortList.direction ? false : true;
    var arr = [], list = document.getElementById('place-list'),
        c = list.children, l = c.length, i;
    for(i=0; i<l; i++) arr[i] = c[i]; // "convert" NodeList to array
    arr.sort(function(a,b) {return a.id < b.id ? -1 : 1;}); //sorting function ends here.
    if( !sortList.direction) arr = arr.reverse();
    for(i=0; i<l; i++) list.appendChild(arr[i]);
};

函数排序列表（）{
sortList.direction=sortList.direction？false:true；
var arr=[]，list=document.getElementById（'place-list'），
c=列表中的子项，l=c.长度，i；
对于（i=0；i我添加了一个
#sort
元素，可以单击该元素对元素进行排序

$("#sort").click(function(){
    var sortedLis = [];
    var lis = $("#place-list").find("li");
    lis.remove();

    var descending = $(lis[0]).attr("id") == lis.length -1;
    lis.each(function(index, element){
        if(!descending){
          sortedLis[lis.length - $(element).attr("id")] = element;
        }else{
            sortedLis[$(element).attr("id")] = element;
        }
    });

    $("#place-list").append(sortedLis);
});

可以对jQuery元素的集合使用
sort（）
：

var $list = $('#place-list');    
/* store lastSort direction in button data*/
$('button').data('lastSort', 'asc').click(function() {
    var $btn=$(this), $items = $list.children(), lastSort=$btn.data('lastSort');
    var direction = lastSort=='asc' ? 'desc' :  'asc';
   $btn.data('lastSort',direction);
    $list.empty().append($items.sort(directionSort[direction]));
});


var directionSort = {
    asc: function (a, b) {
        return a.id < b.id ? -1 : 1;
    },
    desc: function (a, b) {
        return a.id > b.id ? -1 : 1;
    }
}

var$list=$（“#位置列表”）；
/*在按钮数据中存储最后排序方向*/
$（'button'）。数据（'lastSort'，'asc'）。单击（函数（）{
var$btn=$（this），$items=$list.children（），lastSort=$btn.data（'lastSort'）；
变量方向=最后排序=='asc'？'desc'：'asc'；
$btn.数据（'lastSort'，方向）；
$list.empty（）.append（$items.sort（directionSort[direction]）；
});
变量方向排序={
asc：功能（a、b）{
返回a.idb.id-1:1；
}
}

演示：
您也可以使用

另外，我会将
id=“”
更改为
data id=“”

HTML
例子
StackOverflow不是“为我编写代码”网站。它是“帮助我编写代码”网站。这：不要使用数字作为id。它们不仅很难保持唯一性，而且在HTML4中也是非标准的，在我看来，在HTML5中也是可疑的。如果是新的，我认为这是一个公平的问题，尽管需要知道是否是jquery或javascript的新手，通常能够给出一个好的答案。这种类型的id是LIs还是ord放置的er？它按其
id
排序，这就是
a.id
的目的。这不是颠倒顺序吗？这是fab，但如果id是数字，它会假定id是字符串而不是整数，并按如下顺序排序：1,10,11,12,13,14,15,16,17,18,19,2,20等等，因此需要将
a.id
更改为
parseInt（a.id）
和
b.id
到
parseInt（b.id）
var $list = $('#place-list');    
/* store lastSort direction in button data*/
$('button').data('lastSort', 'asc').click(function() {
    var $btn=$(this), $items = $list.children(), lastSort=$btn.data('lastSort');
    var direction = lastSort=='asc' ? 'desc' :  'asc';
   $btn.data('lastSort',direction);
    $list.empty().append($items.sort(directionSort[direction]));
});


var directionSort = {
    asc: function (a, b) {
        return a.id < b.id ? -1 : 1;
    },
    desc: function (a, b) {
        return a.id > b.id ? -1 : 1;
    }
}

<ul id="place-list">
    <li data-id="4">Tokyo 4</li>
    <li data-id="0">Paris 0</li>
    <li data-id="5">Frankfurt 5</li>
    <li data-id="2">London 2</li>
    <li data-id="1">greece 1</li>
    <li data-id="3">Munich 3</li>
</ul>
<button id="asc">ASC</button>
<button id="desc">DESC</button>

var sortArray = function (items, inverse) {
    var inverse = inverse || false;

    var sortedArray = items.map(function () {
        return {
            id: $(this).data("id"),
            element: $(this)[0].outerHTML
        };
    });

    var appendTo = items.parent();
    items.remove();

    sortedArray.sort(function (a, b) {
        return a.id > b.id ? (inverse ? -1 : 1) : (inverse ? 1 : -1);
    });

    sortedArray.each(function () {
        $(appendTo).append(this.element);
    });
}

$("#asc").click(function () {
    sortArray($("#place-list").find("li"));
});

$("#desc").click(function () {
    sortArray($("#place-list").find("li"), true);
});