如何订购（排序）一 与数字内容列表？(How to order (sort) a l

我有如下是动态创建的列表：

 <ul> <li>20</li> <li>10</li> <li>5</li> <li>3</li> <li>32</li> <li>25</li> <li>6</li> <li>12</li> <li>8</li> </ul> 

是否有可能为了这个列表使用jQuery？ 我需要它下令从低级到更大的，就像这样：

 <ul> <li>3</li> <li>5</li> <li>6</li> <li>8</li> <li>10</li> <li>12</li> <li>20</li> <li>25</li> <li>32</li> </ul> 

Answer 1:

下面应该做的伎俩：

 $(function() { $('button').click(function() { var liContents = []; $('ul li').each(function() { liContents.push(parseInt($(this).text(), 10)); }); liContents.sort(numOrdDesc); $('ul li').each(function() { $(this).text(liContents.pop()); }); }); }); function numOrdDesc(a, b) { return (b - a); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>20</li> <li>10</li> <li>5</li> <li>3</li> <li>32</li> <li>25</li> <li>6</li> <li>12</li> <li>8</li> </ul> <button>Sort</button> 

Answer 2:

var li = $('ul li');
li.sort(function(a, b) {
    if(parseInt($(a).text()) > parseInt($(b).text()))
        return 1;
    else return -1;
});
$('ul').empty().html(li);

Answer 3:

有jQuery插件来处理这一点。 退房TinySort

Answer 4:

这里是一个可能的方式做到这一点：

 $(function() { var elems = $('ul').children('li').remove(); elems.sort(function(a, b) { return parseInt($(a).text()) > parseInt($(b).text()); }); $('ul').append(elems); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>20</li> <li>10</li> <li>5</li> <li>3</li> <li>32</li> <li>25</li> <li>6</li> <li>12</li> <li>8</li> </ul> 

Answer 5:

你可以做：

 var listItems = []; $("#list li").each(function() { console.log($(this).text()); listItems.push(parseInt($(this).text())); }); listItems.sort(function(a, b) { return a - b }); $("#list").html(""); $.each(listItems, function(i, v) { $("#list").append($("<li>" + v + "</li>")); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="list"> <li>20</li> <li>10</li> <li>5</li> <li>3</li> <li>32</li> <li>25</li> <li>6</li> <li>12</li> <li>8</li> </ul> 

Answer 6:

使用sortContent插件，一切都将很容易， 整洁 ， 以备再利用：

 $('ul').sortContent({helper:myhelper});

众所周知：

myhelper=function(e){
   return $('a',$(e)).attr('href');
}

DEMO

---

如果你想探索其他选项，请访问插件首页

文章来源: How to order (sort) a

list with numeric content?