title: Show distance in miles on a Geolocation sort
body: <p>I want to show the distance from each list item in miles by doing something like this with the SPAN tag in the below snippet but I am not sure how. The script is sorting fine and calculating the distance already, I just don't know how to write it to the page. I feel like this is fairly simple so I hope someone can help me!</p>
  
  <pre><code>        &lt;li&gt;
              &lt;div class="name"&gt;
                  Moe Bar &lt;span class="miles"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class="long"&gt;
                  47.60357999999998&lt;/div&gt;
              &lt;div class="lat"&gt;
                  -122.329454&lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p><strong>Full Code</strong>
  Working example at <a href="http://demos.thebeebs.co.uk/bars-in-seattle/" rel="nofollow">http://demos.thebeebs.co.uk/bars-in-seattle/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Local Bars&lt;/title&gt;
      &lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function findMe() {
              if (navigator.geolocation != undefined) {
                  navigator.geolocation.watchPosition(onFound, onError);
              }
          }
          function onFound(pos) {
              var userLat = pos.coords.latitude;
              var userLong = pos.coords.longitude;
              $('ul li').each(function (index) {
                  var locationLat = $(this).find('.lat').html();
                  var locationLong = $(this).find('.long').html();
                  var distance = getDistance(userLat, locationLat, userLong, locationLong);
                  $(this).data("distance", distance);
              })
  
              reOrder();
          }
  
          function onError(pos) {
              alert("Something Went wrong");
          }
  
          function reOrder() {
              $('ul li').sort(sortAlpha).appendTo('ul');
          }
  
          function sortAlpha(a, b) {
             return $(a).data('distance') &gt; $(b).data('distance') ? 1 : -1;
          };
  
          function getDistance(lat1, lat2, lon1, lon2) {
              var R = 6371; // km
              var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) +
                    Math.cos(lat1) * Math.cos(lat2) *
                    Math.cos(lon2 - lon1)) * R;
              return d;
  
          }; 
  
  
      &lt;/script&gt;
      &lt;style&gt;
          ul .long, ul .lat
          {
              display: none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;a href="#" onclick="findMe()"&gt;Find Closest Pub&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="name"&gt;
                      Moe Bar&lt;/div&gt;
                  &lt;div class="long"&gt;
                      47.60357999999998&lt;/div&gt;
                  &lt;div class="lat"&gt;
                      -122.329454&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="name"&gt;
                      Frontier Room&lt;/div&gt;
                  &lt;div class="long"&gt;
                      47.61469022047056&lt;/div&gt;
                  &lt;div class="lat"&gt;
                      -122.34816509008769&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="name"&gt;
                      See Sound&lt;/div&gt;
                  &lt;div class="long"&gt;
                      47.6156159656448&lt;/div&gt;
                  &lt;div class="lat"&gt;
                      -122.32593494177237&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>