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

Question

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>

Placement

Answer 1

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>

Erfurt

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

Thaxter

Answer 3

There are jQuery plugins to handle this as well. Check out TinySort

Chumley

Answer 4

Here is a possible way to do it:

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

Kinesiology

Answer 5

You can do:

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>

Mandrill

Answer 6

Using sortContent plugin ,everything will be easy,clean and ready for reuse :

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

Known that :

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

DEMO

---

If you want to discover other options , visit Plugin HOMEPAGE

Opulent

You should make it clear that you're the author of the plugin you're suggesting. – Jaguar