jQuery：不是按升序和降序排序，而是简单地做一个反转

Question

有一个相当大的表，但在一个 DIV 上）。有必要给她按价格排序的机会。

下面的代码应该按价格的升序和降序对行进行排序，但它只是相反。请告诉我，我的错误是什么？

jQuery(function ($) {
    var thead = $('#tsection .thead');
    var tbody = $('#tsection .tbody');
    var price = tbody.find('.price').text().replace(/[^0-9]/gi, '');
    var rows = tbody.find('.list_item');

    var ascending = false;

    $('#tsection').on('click', '.thead .price', function () {

        var sorted = $(rows).sort(function (a, b) {
            return (ascending ==
                ($(a).find(price).html()) <
                ($(b).find(price).html())) ? 1 : -1;
        });
        ascending = ascending ? false : true;

        $(tbody).append(sorted);

    });

});

.thead div {
    display: inline-block;
    width: 100px;
    padding: 10px;
    border-bottom: 1px solid #333;
}

.thead .price:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0dc";
    margin-left: 2px;
}

.tbody .list_item div {
    display: inline-block;
    width: 100px;
    padding: 10px;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="tsection">
    <div class="thead">
        <div class="name">Name</div>
        <div class="country">Country</div>
        <div class="price">Price</div> <!-- asc/desc sorting by digit -->
        <div class="time">Time</div>
    </div>

    <div class="tbody">
        <div class="list_item">
            <div class="name">Mark</div>
            <div class="country">USA</div>
            <div class="price">From 1 920 $</div> <!-- asc/desc sorting by digit -->
            <div class="time">9 months</div>
        </div>
        <div class="list_item">
            <div class="name">Piter</div>
            <div class="country">Colombia</div>
            <div class="price">2 220 $</div> <!-- asc/desc sorting by digit -->
            <div class="time">2,5 months</div>
        </div>
        <div class="list_item">
            <div class="name">Martin</div>
            <div class="country">Chine</div>
            <div class="price">From 820 $</div> <!-- asc/desc sorting by digit -->
            <div class="time">6 months</div>
        </div>
        <div class="list_item">
            <div class="name">Jacob</div>
            <div class="country">Israel</div>
            <div class="price">From 935 $</div> <!-- asc/desc sorting by digit -->
            <div class="time">4,7 months</div>
        </div>
    </div>
</section>

我是一个初学者，一天都没有搞清楚。如果有任何帮助，我将不胜感激）

Answer 1

你不能像现在这样使用$(a).find(price)，你必须这样做：

var sorted = $(rows).sort(function(a, b) {
  return (ascending ==
    +($(a).find('.price').text().replace(/[^0-9]/gi, '')) <
    +($(b).find('.price').text().replace(/[^0-9]/gi, ''))) ? 1 : -1;
});

因为如果你运行 console.log($(a).find(price).html()) 你会注意到它返回 undefined。

演示

jQuery(function($) {
  var thead = $('#tsection .thead');
  var tbody = $('#tsection .tbody');
  var price = tbody.find('.price').text().replace(/[^0-9]/gi, '');
  var rows = tbody.find('.list_item');

  var ascending = false;

  $('#tsection').on('click', '.thead .price', function() {

    var sorted = $(rows).sort(function(a, b) {
      return (ascending ==
        +($(a).find('.price').text().replace(/[^0-9]/gi, '')) <
        +($(b).find('.price').text().replace(/[^0-9]/gi, ''))) ? 1 : -1;
    });
    ascending = ascending ? false : true;

    $(tbody).append(sorted);

  });

});

.thead div {
  display: inline-block;
  width: 100px;
  padding: 10px;
  border-bottom: 1px solid #333;
}

.thead .price:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0dc";
  margin-left: 2px;
}

.tbody .list_item div {
  display: inline-block;
  width: 100px;
  padding: 10px;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="tsection">
  <div class="thead">
    <div class="name">Name</div>
    <div class="country">Country</div>
    <div class="price">Price</div>
    <!-- asc/desc sorting by digit -->
    <div class="time">Time</div>
  </div>

  <div class="tbody">
    <div class="list_item">
      <div class="name">Mark</div>
      <div class="country">USA</div>
      <div class="price">From 1 920 $</div>
      <!-- asc/desc sorting by digit -->
      <div class="time">9 months</div>
    </div>
    <div class="list_item">
      <div class="name">Piter</div>
      <div class="country">Colombia</div>
      <div class="price">2 220 $</div>
      <!-- asc/desc sorting by digit -->
      <div class="time">2,5 months</div>
    </div>
    <div class="list_item">
      <div class="name">Martin</div>
      <div class="country">Chine</div>
      <div class="price">From 820 $</div>
      <!-- asc/desc sorting by digit -->
      <div class="time">6 months</div>
    </div>
    <div class="list_item">
      <div class="name">Jacob</div>
      <div class="country">Israel</div>
      <div class="price">From 935 $</div>
      <!-- asc/desc sorting by digit -->
      <div class="time">4,7 months</div>
    </div>
  </div>
</section>