値ごとに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のを拡張したり枠組みの外でメソッドを作成するか、違いはありません）カスタムsortメソッドを作成し、その後に値を格納しています配列を並べ替えてソートし、コンテナに配置します。だから、

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

もちろん、あなたがこれをやって行くことができる2つの方法があります。すべての値を持つカスタムオブジェクトを作成し、配列に配置してから並べ替えメソッドを実行するか、単純にすべての値を配列にプッシュし、並べ替えを呼び出してから、複雑なロジックをsortメソッド内で実行できます。

希望すると便利です。 （私は完全なコードを書くようになりましたが、時間を過ごすと思っていましたが、おそらくコードを書く独自の方法があります）。