Javascript Jquery根据值对每个排序

我目前正在尝试创建一个商店定位器。我当前的代码从一个xml文件中获取存储信息，然后如果它在给定的半径内，它将把它放在一个div中

我的问题是，它只是在xml中按存储的顺序添加存储。所以在我的例子中，它是按字母顺序排列的。每个商店名称、地址、网站和距离有4个值

我想做的是将它们按从最短到最长的顺序放置在div中。我该怎么做

这是密码

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 {}
});
}

函数searchxml（源代码，rad）{
$（数据）。查找（“标记”）。每个（函数（）{
var$marker=$（这个）；
变量名称=$marker.attr（“名称”）；
var网站=$marker.attr（“网站”）；
变量地址=$marker.attr（“地址”）.replace（“”，”）；
var lat=$marker.attr（“lat”）；
var lng=$marker.attr（“lng”）；
var latlng=新的google.maps.latlng（lat，lng）；
var destination=new google.maps.LatLng（lat，lng）；
var distance=google.maps.geometry.spheremic.ComputedDistanceBeween（起点、终点）；
var miles=数学圆（距离*0.000621371192）；
如果（miles我要做的是创建一个自定义排序方法（可以扩展jQuery，也可以在框架之外创建一个方法，没有区别），然后将值存储在数组中，对它们进行排序，然后将它们放入容器中

function sortByDistance(a, b) {
    var x = a.distance;
    var y = b.distance;
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

显然，有两种方法可以实现这一点。您可以创建一个包含所有值的自定义对象，将每个值放入数组中，然后运行排序方法，或者您可以简单地将所有值推送到数组中，调用排序，然后在排序方法中执行复杂的逻辑

希望这能有所帮助！（我开始编写完整的代码，但后来我发现我花了太多时间，你可能有自己的代码编写方式）。
而不是只在你创建的新div后面加上你现在所在的位置（即在
$（'#storeInfo'）。prepend（…
），您可以将它们连同它们与位置的距离一起存储在一个数组中，然后按距离对该数组进行排序，最后按排序顺序将这些新div添加到
storeInfo
元素中

e、 g

函数searchxml（源代码，rad）{
var stores=[]；//将存储div和距离的数组。。
$（数据）。查找（“标记”）。每个（函数（）{
...
如果（miles）使用自定义排序功能来比较距离…在您的回答中，对象“storeDivs”是什么？我看不出它在哪里水合/填充…很抱歉，它是一种类型-应该是
stores
。
var arr = [];
// add your items arr.push(..item..);
arr.sort(sortByDistance);

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);
  });
}