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

Answer 2

我建议使用数字值而不是字符串

var divs = $("div.product");

$('#priceAscending').on('click', function() {
	var ascendingOrderedDivs = divs.sort(function(a, b) {
    var aVal = parseFloat($(a).find("div.price").text().replace("$",""));
    var bVal = parseFloat($(b).find("div.price").text().replace("$",""));
  	return aVal - bVal;
  });
  $("#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>

Answer 3

您可以将价格末尾的$替换为空字符串，然后使用parseFloat比较值。请注意，页面上的ID应该是唯一的。对于所有跨度，请使用id="name

var $divs = $("div.product");

$('#priceAscending').on('click', function() {
  var ascendingOrderedDivs = $divs.sort(function(a, b) {
    return parseFloat($(a).find("div.price").text().replace(/\$$/, '')) - parseFloat($(b).find("div.price").text().replace(/\$$/, ''));
  });
  $("#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>

jQuery-按div升序排序

3 个答案: