There is a fairly large table, but on a DIV). It is necessary to give her the opportunity to sort by price.
The code below should sort the rows in ascending and descending order of the price, but instead it just does the reverse. Tell me, please, what is my mistake?
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>I'm a beginner, killed the day and didn't figure it out. I will be grateful for any help)
CodePudding user response：
You can't use $(a).find(price) like you're doing, you have to do it like:
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;
});
Because if you run a console.log($(a).find(price).html()) you will notice it returns undefined.
Demo