JQuery - упорядочивание div по возрастанию
Итак, у меня есть этот код
var $divs = $("div.product");
$('#priceAscending').on('click', function() {
var ascendingOrderedDivs = $divs.sort(function(a, b) {
return $(a).find("div.price").text() > $(b).find("div.price").text();
});
$("#container").html(ascendingOrderedDivs);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrap">
<button id = "priceAscending">Price ascending</button>
<!--<button id = "priceDescending">Price descending</button>-->
<div id = "container">
<div class = "product">
<span id = "name">Product One</span>
<div class = "price">14.85$</div>
</div>
<div class = "product">
<span id = "name">Product Two</span>
<div class = "price">27.59$</div>
</div>
<div class = "product">
<span id = "name">Product Three</span>
<div class = "price">2.64$</div>
</div>
</div>
</div>Я хочу отсортировать div.product в порядке возрастания по цене, но это не работает. Он помещает 2,64 в середину, но должен ставить его первым.
Как я могу исправить эту проблему с помощью jQuery?
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
45
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Вам нужно сменить > на -
return $(a).find("div.price").text() - $(b).find("div.price").text();
Вам также необходимо убрать $ из цены, чтобы сравнить значения. Вы можете сделать это с помощью str.slice(0, -1)
return $(a).find("div.price").text().slice(0, -1) - $(b).find("div.price").text().slice(0, -1);
Вот рабочий JSFiddle
Просто переверните логику. Вместо a - b вы делаете b - a. Здесь вы можете найти много интересных способов использования sort() в JS.
—
16.12.2018 15:35
То, что сказал Миракурун, вероятно, является лучшим решением, но что мне нравится делать, если мне нужен какой-то переключатель сортировки, - это добавить *-1, если он спускается, что в основном делает то же самое, но его легче условно изменить.
—
16.12.2018 15:46
Я предлагаю использовать числовое значение вместо строки
var divs = $("div.product");
$('#priceAscending').on('click', function() {
var ascendingOrderedDivs = divs.sort(function(a, b) {
var aVal = parseFloat($(a).find("div.price").text().replace("$",""));
var bVal = parseFloat($(b).find("div.price").text().replace("$",""));
return aVal - bVal;
});
$("#container").html(ascendingOrderedDivs);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrap">
<button id = "priceAscending">Price ascending</button>
<!--<button id = "priceDescending">Price descending</button>-->
<div id = "container">
<div class = "product">
<span id = "name">Product One</span>
<div class = "price">14.85$</div>
</div>
<div class = "product">
<span id = "name">Product Two</span>
<div class = "price">27.59$</div>
</div>
<div class = "product">
<span id = "name">Product Three</span>
<div class = "price">2.64$</div>
</div>
</div>
</div>Вы можете заменить $ в конце цен пустой строкой и использовать parseFloat для сравнения значений. Обратите внимание, что id на странице должен быть уникальным. Для всех пролетов вы используете id = "name
var $divs = $("div.product");
$('#priceAscending').on('click', function() {
var ascendingOrderedDivs = $divs.sort(function(a, b) {
return parseFloat($(a).find("div.price").text().replace(/\$$/, '')) - parseFloat($(b).find("div.price").text().replace(/\$$/, ''));
});
$("#container").html(ascendingOrderedDivs);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrap">
<button id = "priceAscending">Price ascending</button>
<!--<button id = "priceDescending">Price descending</button>-->
<div id = "container">
<div class = "product">
<span id = "name">Product One</span>
<div class = "price">14.85$</div>
</div>
<div class = "product">
<span id = "name">Product Two</span>
<div class = "price">27.59$</div>
</div>
<div class = "product">
<span id = "name">Product Three</span>
<div class = "price">2.64$</div>
</div>
</div>
</div>Другие вопросы по теме
Функции обратного вызова обещают ajax
В поиске Typeahead. Нужен ID предмета. После выбора элемента из окна поиска не удается получить идентификатор элемента
Css выберите пустой массив из .data ()
Shopify Ajax API - /cart/update.js не работает для обновления количества товаров
Как обернуть элемент во всплывающее окно?
Как я могу проверить, присутствует ли имя класса перед выполнением jQuery
Средство выбора диапазона дат отключить проблему даты
Конвертация валюты с двумя валютами
Функция не работает должным образом внутри оператора if javascript / jQuery
Можно ли исключить день недели из выбранного диапазона с помощью datepicker (пользовательский интерфейс JQuery)
Похожие вопросы
Angular - динамическое добавление компонентов в разные родительские элементы
Шутка, тестирование асинхронного JS-кода всегда терпит неудачу
JavaScript - массив заполняется кучей неопределенных
Функции обратного вызова обещают ajax
В поиске Typeahead. Нужен ID предмета. После выбора элемента из окна поиска не удается получить идентификатор элемента
UseReducer / useState обновляется слишком медленно
Uncaught TypeError: невозможно прочитать свойство 1 из undefined (даже если оно определено)
Возвращаемое значение из объекта javascript literel
Окно подсказки не открывается при нажатии на кнопку
Упростить переменную массива JavaScript
Спасибо, что помогли мне, а как насчет заказа по убыванию?