Сортировка псевдо строк по значению
Добрый день уважаемые. Подскажите пожалуйста как произвести сортировку псевдострок с контентом. Приведу пример https://jsfiddle.net/cf8pakyL/3/ . Есть необходимость что б по непарному нажатию на кнопку рейтинг эти строки сортировались от большего значения к меншему по непарному нажатию от меньшего к большему в завимости от значения в классе bl_companies__rating_current в данной строке. Как это реализовать.
Я размышлял так: Создаем ассоциативный массив в котором ключами есть значений этих строк, а значениями параметров числа их классов. Затем сортируем через .sort(); и .sort().revers() эти значения и перестанавливаем порядок; Но пока, что всё без результатно. |
|
Спасибо, рони. А вот если задача усложнилась и необходимо при нажатии на кнопки Отдача | Рейтинг что б блоки сортировать за таким законом:
первое нажатие от большего значения к меньшему второе нажатие от меньшего значения к большему. https://jsfiddle.net/cf8pakyL/6/ Я вроди как свернул их в объекты. но как менять местами пункты этих объектов не понятно. |
Сортировка блоков по значению в классах с реверсом
Black_Star,
шифровка из центра ...
window.addEventListener("DOMContentLoaded", function() {
function f(b, c) {
g.sort(function(a, d) {
a = a.querySelector(b).textContent.replace(",", ".").replace(/[^\d.]/g, "");
d = d.querySelector(b).textContent.replace(",", ".").replace(/[^\d.]/g, "");
return c ? d - a : a - d;
}).forEach(function(a) {
e.appendChild(a);
});
}
var e = document.querySelector(".bl_companies__full"), g = [].slice.call(e.querySelectorAll("li"), 0);
[{a:".js-rating", b:".bl_companies__rating_current"}, {a:".js-recoil", b:".bl_companies__recoil"}].forEach(function(b) {
var c;
document.querySelector(b.a).addEventListener("click", function() {
c = !c;
f(b.b, c);
});
});
});
|
Black_Star,
вариант без перемещения блоков ( flexbox order) https://www.sitepoint.com/user-sorta...lexbox-jquery/ если понравится можно в варианте выше строка 8 appendChild заменить на style, будет тоже самое |
Сортировка блоков по значению в классах с реверсом css3
Black_Star,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bl_companies__full {
display: flex;
flex-wrap: wrap;
flex-direction: column;
list-style: none;
}
.bl_companies__full li {
width: 25%;
border: 2px solid #5a94c9;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function f(b, c) {
g.sort(function(a, d) {
a = a.querySelector(b).textContent.replace(",", ".").replace(/[^\d.]/g, "");
d = d.querySelector(b).textContent.replace(",", ".").replace(/[^\d.]/g, "");
return c ? d - a : a - d;
}).forEach(function(a,i) {
a.style.order = i
});
}
var e = document.querySelector(".bl_companies__full"), g = [].slice.call(e.querySelectorAll("li"), 0);
[{a:".js-rating", b:".bl_companies__rating_current"}, {a:".js-recoil", b:".bl_companies__recoil"}].forEach(function(b) {
var c;
document.querySelector(b.a).addEventListener("click", function() {
c = !c;
f(b.b, c);
});
});
});
</script>
</head>
<body>
<button class="js-recoil icon-sorter" type="button" title="Сортировка по отдаче">отдача</button>
<button class="js-rating icon-sorter" type="button" title="Сортировка по рейтингу">рейтинг</button>
<ul class="bl_companies__full">
<li><p class="bl_companies__recoil">45,4</p><span class="bl_companies__rating_current">2</span></li>
<li><p class="bl_companies__recoil">87,3</p><span class="bl_companies__rating_current">4</span></li>
<li><p class="bl_companies__recoil">88,3</p><span class="bl_companies__rating_current">4</span></li>
<li><p class="bl_companies__recoil">77,2</p><span class="bl_companies__rating_current">3</span></li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:48. |