如何在Javascript中基于数值对动态列表项进行排序

这让我很紧张

我正在开发一个应用程序，其中列出了许多办公地点

该应用程序选择用户的位置，并计算他与所有办公室之间的距离

现在，我需要根据列表与用户的距离按升序对列表进行排序

现在，当应用程序通过javascript加载时，li项在ul中动态创建

我的应用程序从firebase连接并获取各个办公室的数据

但是，距离是在客户端创建的，我需要根据该距离对列表项（办公室）进行排序

最近的位置

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-firestore.js"></script>

//距离计算
//您的web应用程序的Firebase配置
var firebaseConfig={
apiKey：“Aizasydxtwwjwygp_sGx9R1qk-4gDuH9ZEx9xg”，
authDomain:“parish connect.firebaseapp.com”，
数据库URL:“https://parish-connect.firebaseio.com",
投影：“教区连接”，
storageBucket：“parish connect.appspot.com”，
messagingSenderId：“304974921983”，
appId:“1:304974921983:web:9AC09B834259488951CCA”，
测量工具：“G-QWLPQ52Z7S”
};
//初始化Firebase
firebase.initializeApp（firebaseConfig）；
var db=firebase.firestore（）；
var-lat1，lon1；
函数getLocation（）{
if（导航器.地理位置）{
导航器、地理位置、监视位置（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
getLocation（）；
功能显示位置（位置）{
lat1=位置坐标纬度；
lon1=位置坐标经度；
控制台日志（lat1）；
控制台日志（lon1）；
//待办事项：下面的代码创建一个动态列表项（
）并打印到
//
容器。我希望能够根据
//距离
${calcDistance（doc.data（）.lat，doc.data（）.lng）.toFixed（5）km远
var text=“”；
db.collection（“教区加纳”）.onSnapshot（querySnapshot=>{
querySnapshot.forEach（doc=>{
文本+=`

${doc.data（）.name}
${calcDistance（doc.data（）.lat，doc.data（）.lng）.toFixed（5）km以外


`
});
document.getElementById（“所有教区”）.innerHTML=text；
});
}
//结束
//当位置抛出错误时
函数onLocationError（e）{
警报（e.message）；
}
//用于计算距离的函数
功能计算距离（lat2、lon2）{
函数toRad（x）{
返回x*Math.PI/180；
}
var R=6371；//km
var dLat=toRad（lat2-lat1）；
var-dLon=toRad（lon2-lon1）；
变量a=Math.sin（dLat/2）*Math.sin（dLat/2）+
数学cos（toRad（lat1））*数学cos（toRad（lat2））*
数学单（dLon/2）*数学单（dLon/2）；
var c=2*Math.atan2（Math.sqrt（a），Math.sqrt（1-a））；
var d=R*c；
返回d；
}

---

试试下面小提琴中使用的方法

苹果
苹果树
芒果
香蕉



点击这里

函数升序排序（a，b）{ 返回（$（b）.find（'div'）.text（）.toUpperCase（））< （$（a）.find（'div'）.text（）.toUpperCase（））？1:-1； } $（'button'）。在（'click'，function（）{ $（“ul li”）.sort（升序排序）.appendTo（'ul'）； $（“#触发器元素”）.text（“排序”）； });

---

您的问题的一个小演示

您可以首先将querySnapshot映射到一个简单的数据对象数组，并将距离作为附加属性添加到每个对象。然后按该新属性对该数组进行排序。最后，按照已有的方式执行循环（对动态表达式稍作更改）。我还将使用

.map（）

进行循环，然后将

.HTML片段与
连接起来

这看起来是这样的：

db.collection("parish-ghana").onSnapshot(querySnapshot => {
    document.getElementById("all-parishes").innerHTML = querySnapshot.docs
    .map(doc => doc.data())
    .map(data => ({
        ...data,
        distance: calcDistance(data.lat, data.lng)
    }))
    .sort((a, b) => a.distance - b.distance)
    .map(data => `
    <li>
        <div class="card demo-card-header-pic">
            <div style="background-image:url(${data.pic_url})" valign="bottom" class="card-header"><\/div>
            <div class="card-content card-content-padding">
                <p class="parish-item">${data.name}<\/p>
                <p class="distance">${data.distance.toFixed(5)} km away<\/p>
            <\/div>
        <\/div>
    <\/li>
    `)
    .join('<hr>\n');
});

db.collection（“教区加纳”）.onSnapshot（querySnapshot=>{
document.getElementById（“所有教区”）.innerHTML=querySnapshot.docs
.map（doc=>doc.data（））
.map（数据=>({
…数据，
距离：calcDistance（data.lat，data.lng）
}))
.sort（（a，b）=>a.distance-b.distance）
.map（数据=>`

${data.name}
距离${data.distance.toFixed（5）}公里
`)
.join（“
\n”）；
});
这对我的情况没有帮助，因为我正在对数字进行排序，而不是对文本进行排序。。NP很高兴你得到了你的解决方案：-）嗨@trincot，我的项目快结束了。但我被困在某个地方。我希望能够检索firestore中每个文档的文档id，并将其作为属性值传递到我的每个
阶段。我已尝试了所有可能的方法，但无法实现。我们将感谢您的帮助。评论部分不用于后续问题。我建议你问一个新问题，在那里你提供了所有必要的信息来了解你的想法
  <ul> 
            <li><div>   apple</div></li> 
                        <li><div>   pinapple</div></li>
                        <li><div>   mango   </div></li> 
            <li><div>   banana</div></li>
        </ul> 
        <br> 

        <center> 
            <button> 
                click here 
            </button> 
        </center> 

        <p id = "triger_elem" style =  
            "text-align:center; color:green; font-size:20px; font-weight:bold;"> 
        </p> 


function Ascending_sort(a, b) { 
                return ($(b).find('div').text().toUpperCase()) <  
                    ($(a).find('div').text().toUpperCase()) ? 1 : -1;  
            } 
            $('button').on('click', function() { 
                $("ul li").sort(Ascending_sort).appendTo('ul'); 
                $("#triger_elem").text("sorted"); 
            });     

db.collection("parish-ghana").onSnapshot(querySnapshot => {
    document.getElementById("all-parishes").innerHTML = querySnapshot.docs
    .map(doc => doc.data())
    .map(data => ({
        ...data,
        distance: calcDistance(data.lat, data.lng)
    }))
    .sort((a, b) => a.distance - b.distance)
    .map(data => `
    <li>
        <div class="card demo-card-header-pic">
            <div style="background-image:url(${data.pic_url})" valign="bottom" class="card-header"><\/div>
            <div class="card-content card-content-padding">
                <p class="parish-item">${data.name}<\/p>
                <p class="distance">${data.distance.toFixed(5)} km away<\/p>
            <\/div>
        <\/div>
    <\/li>
    `)
    .join('<hr>\n');
});