title: Problems converting html contents to integer and then sorting in jquery
body: <p>I've created a very simple greasemonkey script based on <a href="https://stackoverflow.com/questions/7831712/jquery-sort-divs-by-innerhtml-of-children">Jquery - sort DIV&#39;s by innerHTML of children</a> to add buttons to the results panel on www.oldmapsonline.org to enable sorting by date and by scale. This seems to work fine, except for scale sorting on records where there is no scale in the html.</p>
  
  <pre><code>// ==UserScript==
  // @name       Sort oldmapsonline.org records
  // @namespace  http://www.whatsthatpicture.com/
  // @version    0.1
  // @description  A simple tool to add a sort option (by date and by scale)
  // @match      http://www.oldmapsonline.org/*
  // @copyright  2014, James Morley @jamesinealing
  // @require    http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
  
  // ==/UserScript==
  
  // create html buttons and insert in place of search header text
  var links = 'Sort: &lt;a href="#" id="datesort"&gt;Date&lt;/a&gt; &lt;a href="#" id="scalesort"&gt;Scale&lt;/a&gt;';
  $( "#instant-search-header" ).html( links );
  
  //add two event handlers for the sort buttons
  $( "#scalesort" ).click(function() {
      sortUsingNestedText($('#sidecanvas'), "div", "span.mapscale");
  });
  $( "#datesort" ).click(function() {
      sortUsingNestedText($('#sidecanvas'), "div", "span.year");
  });
  
  // sorting function adapted from https://stackoverflow.com/questions/7831712/jquery-sort-divs-by-innerhtml-of-children
  function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
      var vA = parseInt($(keySelector, a).text().replace('1:','').replace(' ','')); // the replace actions removes spaces and the '1:' in the scale, parsInt makes sure it's a number
      var vB = parseInt($(keySelector, b).text().replace('1:','').replace(' ',''));
      return (vA &lt; vB) ? -1 : (vA &gt; vB) ? 1 : 0;
    });
  parent.append(items);
  };
  </code></pre>
  
  <p>You can see a sample page at <a href="http://www.oldmapsonline.org/#bbox=169.619637,-46.121916,171.816902,-44.130108&amp;q=&amp;datefrom=1730&amp;dateto=1750" rel="nofollow noreferrer">http://www.oldmapsonline.org/#bbox=169.619637,-46.121916,171.816902,-44.130108&amp;q=&amp;datefrom=1730&amp;dateto=1750</a> which contains the block to sort something like this</p>
  
  <pre><code>&lt;div id="sidecanvas" class="content" style="-webkit-user-select: none;"&gt;
    &lt;div class="item clearFix" id="4638.003"&gt;&lt;img src="/img/75/rumsey/4638.003.jpg"&gt;
      &lt;div class="info"&gt;
        &lt;h2 class="title"&gt;&lt;span class="editions"&gt;&lt;/span&gt;&lt;span class="maintitle"&gt;L'Hemisphere Meridional.&lt;/span&gt;&lt;/h2&gt;
        &lt;p class="details"&gt;&lt;span class="mapscale"&gt; 1:37 000 000&lt;/span&gt;&lt;span class="author"&gt;&lt;span class="year"&gt;1742&lt;/span&gt; - Lisle, Guillaume de, 1675-1726&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item ...
    ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For records where there is no scale the html is <code>&lt;span class="mapscale"&gt;&lt;/span&gt;</code> which seems to stop it sorting correctly (even though it doesn't throw any errors).</p>
  
  <p>Where there is a scale present for all entries (e.g. <a href="http://www.oldmapsonline.org/#bbox=150.326271,-28.645704,153.9188,-26.336192&amp;q=&amp;datefrom=1825&amp;dateto=1825" rel="nofollow noreferrer">http://www.oldmapsonline.org/#bbox=150.326271,-28.645704,153.9188,-26.336192&amp;q=&amp;datefrom=1825&amp;dateto=1825</a>) it appears to work fine.</p>
  
  <p>Any ideas how I can allow for this? I guess just iterating through the values first and setting empty ones to 9999999999 would work, and it would also have the benefit of ensuring that they get placed last in the sort order. But I was wondering if there's something more elegant?</p>
  
  <p><strong>Edit:</strong>
  replacing the <code>$( "#scalesort" ).click(function() { ...</code>  block with the following code did the trick</p>
  
  <pre><code>$( "#scalesort" ).click(function() { 
      // first we check for items with no scale set, and set a very high number to make sure they get sorted last
      $('.mapscale').each(function(index) {
          var scale = $( this ).text();
          if (scale == '') { $( this ).text('9999999999')};
      });
      //then we call the sort function
      sortUsingNestedText($('#sidecanvas'), "div", "span.mapscale");
      //then we scrub the high values so they don't get displayed
      $('.mapscale').each(function(index) {
          var scale = $( this ).text();
          if (scale == '9999999999') { $( this ).text('')};
      });
  
  });
  </code></pre>
  
  <p>but there's something in me that says there must be a more elegant answer?</p>