Sort divs numerically (by download count)-CodePudding

I've made a simple code for sorting the parent divs by their title, however when I tried to do the same with downloads nothing has happened, nor a error or any action of the code.

I have two functions, each of them are called by button with onclick(). The first one works perfectly fine, however I didn't get how to properly sort the parent divs by the download count although I assume it should have the similar code.

Here's the example:

// 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) {
    return $(a).find(".downloads").text() - $(b).find(".downloads").text();
  })
  parent.append(OrderedDivsByDwnl);
}

<div id="content">
  <div >
    <div >Test</div>
    <div >
      45
      <em ></em>
    </div>
  </div>
  <div >
    <div >Awesome Test</div>
    <div >
      15
      <em ></em>
    </div>
  </div>
</div>

Can somebody give me an example of how to properly sort it by numbers inside the div and explain why it doesn't work like that? I am not very experienced with javascript and I've never found someone having a similar issue.

CodePudding user response：

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

// 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 = $(a).find(".downloads").text();
    const bRaw = $(b).find(".downloads").text();
    //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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  <div >
    <div >Test</div>
    <div >
      45
      <em ></em>
    </div>
  </div>
  <div >
    <div >111Awesome Test</div>
    <div >
      7
      <em ></em>
    </div>
  </div>
  <div >
    <div >Awesome Test</div>
    <div >
      15
      <em ></em>
    </div>
  </div>
</div>

<button onclick="sortbyname()">SortByName</button>
<button onclick="sortbymostdwnl()">SortByMostDownloaded</button>

CodePudding user response：

You are nearly there. Here I added some buttons and sorted by different things - I added one for data sort you can "hide" that value but still sort.

// Sort by name with a click of a button
function sortbyname() {
  console.log('sorting Name');
  let parent = $("#content");
  let divs = parent.children();
  let OrderedDivsByName = divs.sort(function(a, b) {
    return $(a).find(".name").text() > $(b).find(".name").text() ? 1 : -1;
  });
  parent.append(OrderedDivsByName);

}

function sortbymostdwnl() {
  console.log('sorting Download');
  let parent = $("#content");
  let divs = parent.children();
  let OrderedDivsByDwnl = divs.sort(function(a, b) {
    return $(a).find(".downloads").text() - $(b).find(".downloads").text();
  });
  parent.append(OrderedDivsByDwnl);
}

function sortByData() {
  console.log('sorting data');
  let parent = $("#content");
  let divs = parent.children();
  let sorted = divs.sort(function(a, b) {
    return $(a).data("sortme") > $(b).data("sortme") ? 1 : -1;;
  });
  parent.append(sorted);
}

$('#sorts-container')
  .on('click', '.sort-things[data-sorttype="by-downloads"]', sortbymostdwnl)
  .on('click', '.sort-things[data-sorttype="by-names"]', sortbyname)
  .on('click', '.sort-things[data-sorttype="by-data"]', sortByData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  <div  data-sortme="apples">
    <div >Test</div>
    <div >
      45
      <em ></em>
    </div>
  </div>
  <div  data-sortme="zippers">
    <div >Awesome Test</div>
    <div >
      15
      <em ></em>
    </div>
  </div>
  <div  data-sortme="gouda">
    <div >Cheese gouda</div>
    <div >
      7
      <em ></em>
    </div>
  </div>
  <div  data-sortme="chedder">
    <div >Cheese - chedder</div>
    <div >
      4
      <em ></em>
    </div>
  </div>
</div>
<div id="sorts-container">
  <button  data-sorttype="by-names" type="button">Sort By Name</button>
  <button  data-sorttype="by-downloads" type="button">Sort By Downloads</button>
  <button  data-sorttype="by-data" type="button">Sort By data</button>
</div>