Sort feature doesn't seem to work. (Javascript)

Question

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 class="price-sorting type-regular" 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" class=" w3-row w3-grayscale" style="width:100%;" > <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Amethyst"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> </div> </div> <p>Amethyst<br><span class="price">£45.00</span></p> </div></a> <a href="#"><div class="w3-container" id="Placeholder1"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder1<br><span class="price">£0.00</span></p> </div></a> </div> <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Bloodstone"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Bloodstone<br><span class="price">£50.00</span></p> </div> </a> <a href="#"><div class="w3-container" id="Placeholder2"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder2<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Placeholder3"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder3<br><span class="price">£0.00</span></p> </div> </a> <a href="#"><div class="w3-container" id="Placeholder4"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder4<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Placeholder5"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder5<br><span class="price">£0.00</span></p> </div> </a> <a href="#"><div class="w3-container" id="Placeholder6"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder6<br><span class="price">£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.

Answer 1

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 class="price-sorting type-regular" 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" class=" w3-row w3-grayscale" style="width:100%;"> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Amethyst"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> </div> </div> <p>Amethyst<br><span class="price">£45.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder1"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder1<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Bloodstone"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Bloodstone<br><span class="price">£50.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder2"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder2<br><span class="price">£10.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder3"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder3<br><span class="price">£0.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder4"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder4<br><span class="price">£35.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder5"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder5<br><span class="price">£5.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder6"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder6<br><span class="price">£10.00</span></p> </div> </a> </div> </div>

Second update:
I now changed my second snippet to reproduce the original structure of two <a> -wrapped <div> s in a parent <div class="w3-col l3 s6"> :

 const cont = $("#products"), products = $('.w3-container'); $(document).on("change", ".price-sorting", function() { const fact=$(this).val()=='l2h'?1:-1, // sort direction prods=products.sort((...arr)=>fact*arr.map(e=>$(".price",e).text().replace(/[£$€]/,'')) .reduce((a,c)=>ac) ).get(); // sorted DOM el. array cont.empty() while (prods.length) { const div= $('<div class="w3-col l3 s6">'); [prods.shift(),prods.shift()].forEach(el=> el && div.append($('<a href="#"></a>').append(el))) cont.append(div); } });

 .as-console-wrapper {max-height:100% !important}

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div style="top:inherit; padding-left:20px; margin-top: 0px; "> <select class="price-sorting type-regular" 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" class=" w3-row w3-grayscale" style="width:100%;"> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Amethyst"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> </div> </div> <p>Amethyst<br><span class="price">£45.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder1"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder1<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Bloodstone"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Bloodstone<br><span class="price">£50.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder2"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder2<br><span class="price">£10.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder3"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder3<br><span class="price">£0.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder4"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder4<br><span class="price">£35.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder5"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder5<br><span class="price">£5.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder6"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder6<br><span class="price">£10.00</span></p> </div> </a> </div> </div>

Update:
Why is the original layout "destroyed" in the sorting process?

In the original HTML the div.w3-container elements were surrounded by <a> elements and each two of them were surrounded by a parent <div class="w3-col l3 s6"> . The sorting process extracts the div.w3-container elements and places them, one after the other, directly into the target element <div id="products"> - without their original "parental" <a> and <div class="w3-col l3 s6"> elements.

Answer 2

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()