Hi! I've been working on my website and i wanna make sorting by ASC and DSC in my products, im new at javascript and i don't understand a lot of the point, the script is copied from a guy who was asking for it too, but it didn't work out for me. Here is my Script and html
var ascending = false;
$('.tab-content').on('click', '.sortByPrice', function() {
var sorted = $('.product').sort(function(a, b) {
return (ascending ==
(convertToNumber($(a).find('.price').html()) <
convertToNumber($(b).find('.price').html()))) ? 1 : -1;
});
if (ascending) {
ascending = false;
$(".sortByPrice").html("Sort by Price: descending");
} else {
ascending = true;
$(".sortByPrice").html("Sort by Price: ascending");
}
$('.results').html(sorted);
});
var convertToNumber = function(value) {
return parseFloat(value.replace('$', ''));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- WWI Minifigs -->
<div class="small-container">
<h2 class="title" id="customminifigures">WWI Minifigs</h2>
<a class="sortByPrice">Sort By Price</a>
<div class="row">
<div class="col-4">
<a href="Edith Cavell.html"><img src="Products img/Edith Cavell/Edith Cavell.png"></a>
<h4>Edith Cavell
</h4>
<p>$31.00
</p>
</div>
<div class="col-4">
<a href="WWI US Infantry.html" target="_blank"><img src="Products img/WWI US Infantry/WWI US Infantry.png"></a>
<h4>WWI US Infantry
</h4>
<p>$26.00</p>
</div>
<div class="col-4">
<a href="WWI Ottoman Infantry.html"><img src="Products img/WWI Ottoman Infantry/WWI Ottoman Infantry.png"></a>
<h4>WWI Ottoman Infantry</h4>
<p>$29.00</p>
</div>
</div>
</div>Please study this
I added classes to the container and to the tabs, added jQuery and bootstrap too
let ascending = true;
const convertToNumber = value => parseFloat(value.replace('$', ''));
$('.small-container').on('click', '.sortByPrice', function() {
var sorted = $('.product').sort(function(a, b) {
const priceA = convertToNumber($(a).find('.price').html())
const priceB = convertToNumber($(b).find('.price').html())
return ascending ? priceA - priceB : priceB - priceA
});
$(this).html(`Sort by Price: ${ascending ? "descending" : "ascending"}`);
ascending = !ascending;
$('.products').html(sorted);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- WWI Minifigs -->
<div class="small-container">
<h2 class="title" id="customminifigures">WWI Minifigs</h2>
<a class="sortByPrice">Sort By Price</a>
<div class="row products">
<div class="col-4 product">
<a href="Edith Cavell.html"><img src="Products img/Edith Cavell/Edith Cavell.png"></a>
<h4>Edith Cavell
</h4>
<p class="price">$31.00
</p>
</div>
<div class="col-4 product">
<a href="WWI US Infantry.html" target="_blank"><img src="Products img/WWI US Infantry/WWI US Infantry.png"></a>
<h4>WWI US Infantry
</h4>
<p class="price">$26.00</p>
</div>
<div class="col-4 product">
<a href="WWI Ottoman Infantry.html"><img src="Products img/WWI Ottoman Infantry/WWI Ottoman Infantry.png"></a>
<h4>WWI Ottoman Infantry</h4>
<p class="price">$29.00</p>
</div>
</div>
</div>$(document).ready(function() {
$('#patientTable thead th').click(function(){
//Add parameter for remembering order type
$(this).attr('data-order', ($(this).attr('data-order') === 'desc' ? 'asc':'desc'));
//Add aditional parameters to keep track column that was clicked
sorttable(this, $('#patientTable thead th').index(this));
});
});
function sorttable(header, index){
var $tbody = $('table tbody');
var order = $(header).attr('data-order');
$tbody.find('tr').sort(function (a, b) {
var tda = $(a).find('td:eq(' + index + ')').text();
var tdb = $(b).find('td:eq(' + index + ')').text();
//Order according to order type
return (order === 'asc' ? (tda > tdb ? 1 : tda < tdb ? -1 : 0) : (tda < tdb ? 1 : tda > tdb ? -1 : 0));
}).appendTo($tbody);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>