按评级(javascript)对有序列表进行排序

Question

长话短说，我的网站上有一个信息很少的酒店列表。我想按其中一个信息对酒店的订单列表进行排序，例如按评级。我做了一些研究，仍然找不到合适的js算法来让它工作。

<ol>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>A</h1>
<div class="rating"><span>3.8</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>B</h1>
<div class="rating"><span>4.5</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>C</h1>
<div class="rating"><span>2.2</span></div>
</div>
</div>
</li>
</ol>

Answer 1

从这些项创建一个数组，并对数组使用sort((，然后将排序数组中的每个项追加回父项中。

const list = document.querySelector('ol'),
items = Array.from(list.querySelectorAll('.item'));
items.sort((a,b)=>{
const [ratA, ratB]  = [a,b].map(el=> el.querySelector('.rating span').textContent)
return ratB - ratA;// descending sort
});
items.forEach(el => list.append(el))

<ol>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>A</h1>
<div class="rating"><span>3.8</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>B</h1>
<div class="rating"><span>4.5</span></div>
</div>
</div>
</li>
<li class="item">
<div class="hotel-container">
<div class="hotel-info">
<h1>C</h1>
<div class="rating"><span>2.2</span></div>
</div>
</div>
</li>
</ol>

Answer 2

如果您将此评级以json形式存储在某个数据库中，那么它应该很简单，只需对对象数组hotels.sort((a, b) => b.rating -> a.rating);进行排序，然后呈现该数组即可。这可能是最有效的方法。还要注意的是，如果你有数千家酒店要排序，你可能会考虑在后台进行排序。