Question

我正在尝试创建商店定位器。我当前的代码从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 {}
});
}

Answer 1

我要做的是创建一个自定义排序方法（你可以扩展jQuery或在框架之外创建一个方法，没有区别），然后将你的值存储在一个数组中，对它们进行排序，然后将它们放入你的容器

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

那么，你有你的项目数组，比如var arr = []，然后调用它：

var arr = [];
// add your items arr.push(..item..);
arr.sort(sortByDistance);

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

希望这有帮助！（我开始编写完整的代码，但后来我觉得我花了太多时间，你可能有自己编写代码的方式）。

Answer 2

您可以将它们与位置一起存储在一个数组中，然后按距离对数组进行排序，而不是仅仅添加您创建的新div（即$('#storeInfo').prepend(...行）。最后将这些新div添加到排序顺序的storeInfo元素中。

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

注意：在这里，我使用...来指示您应该将代码中的内容放在哪里，以便更容易看到更改。

Jquery每个按值排序

2 个答案: