Jquery each sort by value

Question

I'm currently trying to create a store locator. My current code grabs the stores information from an xml file, then if it's in the given radius it will place it inside a div.

My problem is that it just adds the stores in the order their in inside the xml. So in my case it's alphabetical. There are 4 values for each store Name, Address, website, and then the distance.

What I want to be able to do is place them in the div in order from the shortest distance to longest. How can I do that?

Here's the code

function searchxml(origin, rad) {
$(data).find("marker").each(function () {
    var $marker = $(this);
    var name = $marker.attr("name");
    var website = $marker.attr("website");
    var address = $marker.attr("address").replace('&lt;', '<').replace('&gt;', '>');
    var lat = $marker.attr("lat");
    var lng = $marker.attr("lng");
    var latlng = new google.maps.LatLng(lat, lng);
    var destination = new google.maps.LatLng(lat, lng);
    var distance = google.maps.geometry.spherical.computeDistanceBetween(origin, destination);

    var miles = Math.round(distance * 0.000621371192);
    if (miles <= rad) {
        $('#storeInfo').prepend('<div class="storeLocation"><div class="storeLeft"><span class="storeTitle">' + name + '</span></br><p class="storeAddress">' + address + '</p><a href="' + website + '">' + website + '</a></div><div class="storeRight"><span class="storeDistance">Distance: ' + miles + ' miles</span><a href="http://maps.google.com/maps?saddr=' + address + '&daddr=' + origin + '"  class="storeDirections">Map It</span></div><div class="clear"></div></div>').html();
        $('#map_canvas').gmap('addMarker', {
            'position': destination,
            'bounds': true
        }).click(function () {
            $('#map_canvas').gmap('openInfoWindow', {
                'content': name + '<br/>' + address
            }, this);
        });
    } else {}
});
}

Answer 1

Instead of just appending the new divs you create where you are (i.e. on the line $('#storeInfo').prepend(...), you could store them in an array together with their distance from the location, then sort this array by the distance and finally add these new divs to the storeInfo element in the sorted order.

e.g.

function searchxml(origin, rad) {
  var stores = []; //array which will store divs and the distances..
  $(data).find("marker").each(function () {
      ...
     if (miles <= rad) {
        var div = $('<div class="storeLocation"> ...');
        //don't just add this straight away..
        //store it in a simple object holding the new div
        //and the distance and push it onto the array.. 
        stores.push({ div: div, miles: miles });

       $('#map_canvas').gmap('addMarker', {
          ...
    } else {}
  });

  //sort to get the right order..
  stores.sort(function(a,b){
      return b.miles - a.miles; //smaller is better..
  });
  //now append them in the sorted order..
  var storeInfo = $('#storeInfo');
  $.each(stores, function(store){
      storeInfo.append(store.div);
  });
}

Note: here I've used ... to indicate where you should put what's in you code already in an attempt to make the changes easier to see.