javascript - jQuery - 按升序排列 div

Question

所以我有这个代码

var $divs = $("div.product");

$('#priceAscending').on('click', function() {
	var ascendingOrderedDivs = $divs.sort(function(a, b) {
  	return $(a).find("div.price").text() > $(b).find("div.price").text();
  });
  $("#container").html(ascendingOrderedDivs);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  
  <button id="priceAscending">Price ascending</button>
  <!--<button id="priceDescending">Price descending</button>-->
  
  <div id="container">
    
    <div class="product">
      <span id="name">Product One</span>
      <div class="price">14.85$</div>
    </div>
    
    <div class="product">
      <span id="name">Product Two</span>
      <div class="price">27.59$</div>
    </div>
    
    <div class="product">
      <span id="name">Product Three</span>
      <div class="price">2.64$</div>
    </div>
    
  </div>
  
</div>

我想根据价格对 div.product 进行升序排序，但它不起作用。它将 2.64 放在中间，但它应该放在前面。

如何使用 jQuery 解决此问题？

Answer 1

您需要将>更改为-

return $(a).find("div.price").text() - $(b).find("div.price").text();

您还需要从价格中删除 $ 来比较这些值。您可以使用 str.slice(0, -1)

来实现

return $(a).find("div.price").text().slice(0, -1) - $(b).find("div.price").text().slice(0, -1);

这是一个工作 JSFiddle