You are using the raw values coming from the div content (via .text()) to make the comparison inside your sort callback like they were numbers.
You should parse first those values with parseInt and then use those numbers to make the comparison.
Here I added to your snippet the buttons bound to the 2 sorting functions, and inside the sortbymostdwnl function, I added the diagnostic to show on console the culprit and better tuned the comparison expression to make it meaningful.
*I also added an item to the list to better show the sorting
Adding noise to the html
Following the latest comments I added some noise in the .downloads elements with some <script> blocks both before and after the text content inside the .download divs.
As pointed out, the previous strategy wasn't working because the .text() method doesn't limit its action at returning the content of the children text nodes only.
So following the suggestion I found here:
Using .text() to retrieve only text not nested in child tags
I added this function:
function fetchTextNodesContent($target){
return $target
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
}
// Sort by name with a click of a button
function sortbyname() {
let parent = $("#content");
let divs = parent.children();
var OrderedDivsByName = divs.sort(function(a, b) {
return $(a).find(".name").text() >= $(b).find(".name").text();
});
parent.append(OrderedDivsByName);
}
// Let's try and sort all of the divs by download count with a click of a button
function sortbymostdwnl() {
let parent = $("#content");
let divs = parent.children();
var OrderedDivsByDwnl = divs.sort(function(a, b) {
//fetches the raw values from a and b
const aRaw = fetchTextNodesContent($(a).find(".downloads"));
const bRaw = fetchTextNodesContent($(b).find(".downloads"));
//shows them on console
//console.log('raw values:', `a: "${aRaw}"`, `b: "${bRaw}"`);
//parses the values
const aParsed = parseInt(aRaw);
const bParsed = parseInt(bRaw);
//show them on console
console.log('parsed values:', `a: "${aParsed}"`, `b: "${bParsed}"`);
//performs the comparison on numbers
return bParsed - aParsed;
})
parent.append(OrderedDivsByDwnl);
}
function fetchTextNodesContent($target){
return $target
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="wrapper">
<div class="name">Test</div>
<div class="downloads">
<!-- Adding noise before -->
<script>/**/</script>
45
<!-- Adding noise after -->
<script>/**/</script>
<em class="download_icon"></em>
</div>
</div>
<div class="wrapper">
<div class="name">111Awesome Test</div>
<div class="downloads">
<!-- Adding noise before -->
<script>/**/</script>
7
<!-- Adding noise after -->
<script>/**/</script>
<em class="download_icon"></em>
</div>
</div>
<div class="wrapper">
<div class="name">Awesome Test</div>
<div class="downloads">
<!-- Adding noise before -->
<script>/**/</script>
15
<!-- Adding noise after -->
<script>/**/</script>
</script>
<em class="download_icon"></em>
</div>
</div>
</div>
<button onclick="sortbyname()">SortByName</button>
<button onclick="sortbymostdwnl()">SortByMostDownloaded</button>
