Estoy ordenando el artículo por precio y alfabéticamente también. Ordena alfabéticamente perfectamente bien. Está clasificando la matriz de precios pero no imprimiendo objetos según el precio ordenado. Todo está funcionando perfectamente en console.log, pero cuando selecciono la opción de precio bajo a alto, no hace ningún cambio en los elementos, mientras que se realiza en la consola.
$(document.body).on('change', '#products-sorting', function() { var priceArr = []; var nameArr = []; for (var i = 0; i < tempArr.length; i++) { var price = $(tempArr[i]).find('.addToWishlist').data("price").replace("$", ""); var name = $(tempArr[i]).find('.addToWishlist').data("name"); priceArr.push(price) nameArr.push(name); } //sort by Price for (var n = 0; n < priceArr.length; n++) { for (var i = 0; i < tempArr.length; i++) { //sort price low to high if ($(this).val() === 'Price, low to high') { priceArr.sort(function(a, b) { return a - b }) } //sort price high to low if ($(this).val() === 'Price, high to low') { priceArr.sort(function(a, b) { return b - a }) } var price = $(tempArr[i]).find('.addToWishlist').data("price").replace("$", ""); if (priceArr[n] == price) $("#product-items").append(tempArr[i]) } } //console.log(priceArr) //sort Alphabetically for (var n = 0; n < nameArr.length; n++) { for (var i = 0; i < tempArr.length; i++) { //sort alphabetically A to Z if ($(this).val() === 'Alphabetically, A to Z') nameArr.sort(); //sort alphabetically Z to A if ($(this).val() === 'Alphabetically, Z to A') { nameArr.sort(); nameArr.reverse() } var name = $(tempArr[i]).find('.addToWishlist').data("name"); if (nameArr[n] == name) $("#product-items").append(tempArr[i]) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="select-box" class="clearfix"> <label for="products">Sort by</label> <select name="products" id="products-sorting"> <option value="Featured">Featured</option> <option value="Alphabetically, A to Z">Alphabetically, A to Z</option> <option value="Alphabetically, Z to A">Alphabetically, Z to A</option> <option value="Price, low to high">Price, low to high</option> <option value="Price, high to low">Price, high to low</option> </select> </div>No necesita hacer su clasificación dentro de los bucles. Simplemente ordene tempArr en lugar de copiar a priceArr y nameArr . Luego puede agregar tempArr al contenedor para mostrarlo en el orden ordenado.
$(document.body).on('change', '#products-sorting', function() { function getPrice(el) { return parseFloat($(el).find('.addToWishlist').data("price").replace("$", "")); } function getName(el) { return $(el).find('.addToWishlist').data("name"); } switch ($(this).val()) { //sort price low to high case 'Price, low to high': tempArr.sort((a, b) => getPrice(a) - getPrice(b)); break; //sort price high to low case 'Price, high to low': tempArr.sort((a, b) => getPrice(b) - getPrice(a)); break; case 'Alphabetically, A to Z': tempArr.sort((a, b) => getName(a).localeCompare(getName(b))); break; case 'Alphabetically, Z to A': tempArr.sort((a, b) => getName(b).localeCompare(getName(a))); break; } $("#product-items").empty().append(tempArr); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="select-box" class="clearfix"> <label for="products">Sort by</label> <select name="products" id="products-sorting"> <option value="Featured">Featured</option> <option value="Alphabetically, A to Z">Alphabetically, A to Z</option> <option value="Alphabetically, Z to A">Alphabetically, Z to A</option> <option value="Price, low to high">Price, low to high</option> <option value="Price, high to low">Price, high to low</option> </select> </div>