jquery - 如何订购（排序）包含数字内容的列表？

Question

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

<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');
}

演示

---

如果您想发现其他选项，请访问插件主页