JQuery каждой сортировки по значению

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

Вместо того, чтобы просто добавлять новые div, которые вы создаете, где вы находитесь (то есть на линии $('#storeInfo').prepend(...), вы можете сохранить их в массив вместе с их расстоянием от места, затем отсортировать этот массив по расстоянию и, наконец, добавить эти новые элементы div для элемента storeInfo в отсортированном порядке.

, например

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

Примечание: здесь я использовал ..., чтобы указать, куда вы должны поместить то, что находится в вашем коде, уже в попытке облегчить просмотр изменений.

Answer 2

То, что я хотел бы сделать, это создать собственный метод сортировки (вы можете расширить 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);

Очевидно, у вас есть два способа сделать это. Вы можете создать пользовательский объект со всеми своими значениями в нем, поместить каждое в массив и затем запустить метод сортировки, или вы можете просто поместить все свои значения в массив, вызвать сортировку и затем выполнить сложную логику внутри метода сортировки .

Надеюсь, это поможет! (Я начал писать полный код, но потом решил, что трачу слишком много времени, и у вас, вероятно, есть свой способ написания кода).