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 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:UsersHarrison GobeyDownloadsDiceamethyst1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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.

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

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:UsersHarrison GobeyDownloadsDiceamethyst1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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>