Alright so in my last post I wasn't very clear with what isn't happening with the code and what should be happening.
I am looking to implement a price sorting feature where the user can use the drop-down to sort either by; 'high to low', or 'low to high'.
The items I'm looking to sort by price are the w3-containers, as each are their own product.
What instead happens, is nothing at all. When I select either 'high to low' or 'low to high' from the drop-down menu, and I'm not sure why this is.
I'll include the relevant code below.
$(document).on("change", ".price-sorting", function() {
var sortingMethod = $(this).val();
if(sortingMethod == 'l2h')
{
sortProductsPriceAscending();
}
else if(sortingMethod == 'h2l')
{
sortProductsPriceDescending();
}
});
function getAmount(price){
return parseFloat(price.replace('$', ''));
}
function sortProductsPriceAscending()
{
var products = $('.w3-container');
products.sort(function(a, b){ return getAmount($(a).find('.price').text()) - getAmount($(b).find('.price').text()) });
$(".products").html(products);
}
function sortProductsPriceDescending()
{
var products = $('.w3-container');
products.sort(function(a, b){ return getAmount($(b).find('.price').text()) - getAmount($(a).find('.price').text()) });
$(".products").html(products);
}
<div style="top:inherit; padding-left:1050px; margin-top: 0px; ">
<select name="price-sorting">
<option selected disabled>Sort by price:</option>
<option value="l2h">Low to high</option>
<option value="h2l">High to low</option>
</select>
</div>
<div id="products" style="width:100%;" >
<div >
<a href="#"><div id="Amethyst">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
<div >
</div>
</div>
<p>Amethyst<br><span >£45.00</span></p>
</div></a>
<a href="#"><div id="Placeholder1">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder1<br><span >£0.00</span></p>
</div></a>
</div>
<div >
<a href="#"><div id="Bloodstone">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Bloodstone<br><span >£50.00</span></p>
</div> </a>
<a href="#"><div id="Placeholder2">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder2<br><span >£0.00</span></p>
</div> </a>
</div>
<div >
<a href="#"><div id="Placeholder3">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder3<br><span >£0.00</span></p>
</div> </a>
<a href="#"><div id="Placeholder4">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder4<br><span >£0.00</span></p>
</div> </a>
</div>
<div >
<a href="#"><div id="Placeholder5">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder5<br><span >£0.00</span></p>
</div> </a>
<a href="#"><div id="Placeholder6">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder6<br><span >£0.00</span></p>
</div> </a>
</div>
</div>If there's anything else I can add to be of more help, I'd be glad to do so. Thanks for your help.
CodePudding user response：
Your sort is choking on the pound symbol.
There is no minus operator for strings. It converts to numbers, which are always zero because the text starts with pound symbol, not a number.
The "getAmount" function is removing a dollar sign, but not the pound symbol.
Also, you cannot sort a jquery array object. You can use .toArray() or $.makeArray()
CodePudding user response：
This "corrected" snippet below now works in a way, but there is a lot of repetition that could be removed. Also, it occured to me, that you are not merely sorting the divs but you are also destroying the initial structure that has a few <a> elements in it.
The lines I changed are:
return parseFloat(price.replace(/[£$€]/,'')); // also remove £
and
products.appendTo("#products"); // the target selector refers to an ID
$(document).on("change", ".price-sorting", function() {
var sortingMethod = $(this).val();
if (sortingMethod == 'l2h') {
sortProductsPriceAscending();
} else if (sortingMethod == 'h2l') {
sortProductsPriceDescending();
}
});
function getAmount(price) {
return parseFloat(price.replace(/[£$€]/,''));
}
function sortProductsPriceAscending() {
var products = $('.w3-container');
products.sort(function(a, b) {
return getAmount($(a).find('.price').text()) - getAmount($(b).find('.price').text())
});
products.appendTo("#products");
}
function sortProductsPriceDescending() {
var products = $('.w3-container');
products.sort(function(a, b) {
return getAmount($(b).find('.price').text()) - getAmount($(a).find('.price').text())
});
products.appendTo("#products");
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div style="top:inherit; padding-left:20px; margin-top: 0px; ">
<select name="price-sorting">
<option selected disabled>Sort by price:</option>
<option value="l2h">Low to high</option>
<option value="h2l">High to low</option>
</select>
</div>
<div id="products" style="width:100%;">
<div >
<a href="#">
<div id="Amethyst">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
<div >
</div>
</div>
<p>Amethyst<br><span >£45.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder1">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder1<br><span >£0.00</span></p>
</div>
</a>
</div>
<div >
<a href="#">
<div id="Bloodstone">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Bloodstone<br><span >£50.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder2">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder2<br><span >£10.00</span></p>
</div>
</a>
</div>
<div >
<a href="#">
<div id="Placeholder3">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder3<br><span >£0.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder4">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder4<br><span >£35.00</span></p>
</div>
</a>
</div>
<div >
<a href="#">
<div id="Placeholder5">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder5<br><span >£5.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder6">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder6<br><span >£10.00</span></p>
</div>
</a>
</div>
</div>And in a DRY version the script would look like this:
const products = $('.w3-container');
$(document).on("change", ".price-sorting", function() {
let fact=$(this).val()=='l2h'?1:-1; // sort direction
products.sort((...arr)=>
fact*arr.map(e=>$(".price",e).text().replace(/[£$€]/,''))
.reduce((a,c)=>a-c) )
.appendTo("#products");
})<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div style="top:inherit; padding-left:20px; margin-top: 0px; ">
<select name="price-sorting">
<option selected disabled>Sort by price:</option>
<option value="l2h">Low to high</option>
<option value="h2l">High to low</option>
</select>
</div>
<div id="products" style="width:100%;">
<div >
<a href="#">
<div id="Amethyst">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
<div >
</div>
</div>
<p>Amethyst<br><span >£45.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder1">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder1<br><span >£0.00</span></p>
</div>
</a>
</div>
<div >
<a href="#">
<div id="Bloodstone">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Bloodstone<br><span >£50.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder2">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder2<br><span >£10.00</span></p>
</div>
</a>
</div>
<div >
<a href="#">
<div id="Placeholder3">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder3<br><span >£0.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder4">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder4<br><span >£35.00</span></p>
</div>
</a>
</div>
<div >
<a href="#">
<div id="Placeholder5">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder5<br><span >£5.00</span></p>
</div>
</a>
<a href="#">
<div id="Placeholder6">
<div >
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div >
<button >Buy now <i ></i></button>
</div>
</div>
<p>Placeholder6<br><span >£10.00</span></p>
</div>
</a>
</div>
</div>