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>