How to order (sort) a <li> list with numeric content?

html-lists, jquery, list, sorting

Solution

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>

Problem

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

Original source