如何订购(排序)< li>列出数字内容?

问题描述

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

I have a list as below that is created dynamically:

<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订购此列表?我需要按从低到大的顺序排列，如下所示:

Is it possible order this list using jQuery? I need it ordered from lower to bigger, like this:

<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>

推荐答案

下面应该解决这个问题:

Below should do the trick:

$(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>

这篇关于如何订购(排序)< li>列出数字内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！