jquery按价值分类

我目前正在尝试创建商店定位器。我当前的代码从xml文件中获取商店信息，然后如果它位于给定的半径内，它将把它放在div中。jquery按价值分类

我的问题是，它只是增加了商店在他们的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 {} 
}); 
}

来源

2012-03-27 poerg

使用自定义排序功能，比较距离... – mowwwalker 2012-03-27 20:25:20

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

例如

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

注：这里我用...来表示你应该把什么在你的代码已经在尝试进行更改更容易看到。

来源

2012-03-27 21:01:55

感谢这工作 – poerg 2012-03-27 21:21:16

在你的答案，什么是对象“storeDivs”？我看不到它在哪里水化/人口稠密...... – barrypicker 2014-12-09 00:04:01

对不起，这是一种类型 - 应该是'商店'。 – 2014-12-09 14:00:41

我会做的是创建一个自定义排序方法（你可以扩展的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);

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

希望这会有所帮助！（我开始编写完整的代码，但后来我发现我花费了太多时间，并且您可能有自己的编写代码的方式）。

来源

2012-03-27 20:37:25

jquery按价值分类

回答

相关问题