I have this JavaScript code which uses an ordered list of static HTML tags. when the button is clicked the list changes according to the users location.

Can anyone please help so that when the button is clicked the HTML items which are within a certain vicinity such as 1KM are displayed rather than the whole static HTML list is displayed.

Thank you


<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
function findMe() {
if (navigator.geolocation != undefined) {
navigator.geolocation.watchPosition(onFound, onError);
}
}
function onFound(pos) {
var userLat = pos.coords.latitude;
var userLong = pos.coords.longitude;
$('ol li').each(function (index) {
var locationLat = $(this).find('.lat').html();
var locationLong = $(this).find('.long').html();
var distance = getDistance(userLat, locationLat, userLong, locationLong);
$(this).data("distance", distance);
})

reOrder();
}

function onError(pos) {
alert("Something Went wrong");
}

function reOrder() {
$('ol li').sort(sortAlpha).appendTo('ol');
}

function sortAlpha(a, b) {
return $(a).data('distance') > $(b).data('distance') ? 1 : -1;
};

function getDistance(lat1, lat2, lon1, lon2) {
var R = 6371; // km
var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) +
Math.cos(lat1) * Math.cos(lat2) *
Math.cos(lon2 - lon1)) * R;
return d;

};
</script>

<style>
ol .long, ol .lat
{
display: none;
}
</style>