如何订购（排序）带有数字内容的<li>列表？</li>

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

DEMO

---

如果您想了解其他选项，请访问Plugin HOMEPAGE