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>
Sorting or Ordering a list in R can be done by using lapply() function or using the order() function after converting to a vector using unlist().
Adding the "sortable" class to a <table> element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column's value. Tables must use <thead> and <th> tags for sortable functionality to work. The <th> tag defines a header cell in an HTML table.
JavaScript Array sort() The sort() sorts the elements of an array. The sort() overwrites the original array. The sort() sorts the elements as strings in alphabetical and ascending order.
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>
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With