Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.01.2018, 14:37
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Сортировка псевдо строк по значению
Добрый день уважаемые. Подскажите пожалуйста как произвести сортировку псевдострок с контентом. Приведу пример https://jsfiddle.net/cf8pakyL/3/ . Есть необходимость что б по непарному нажатию на кнопку рейтинг эти строки сортировались от большего значения к меншему по непарному нажатию от меньшего к большему в завимости от значения в классе bl_companies__rating_current в данной строке. Как это реализовать.
Я размышлял так: Создаем ассоциативный массив в котором ключами есть значений этих строк, а значениями параметров числа их классов. Затем сортируем через .sort(); и .sort().revers() эти значения и перестанавливаем порядок; Но пока, что всё без результатно.

Последний раз редактировалось Black_Star, 03.01.2018 в 14:43.
Ответить с цитированием
  #2 (permalink)  
Старый 03.01.2018, 16:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Black_Star,
https://javascript.ru/forum/events/7...tml#post472402
Ответить с цитированием
  #3 (permalink)  
Старый 03.01.2018, 17:18
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Спасибо, рони. А вот если задача усложнилась и необходимо при нажатии на кнопки Отдача | Рейтинг что б блоки сортировать за таким законом:
первое нажатие от большего значения к меньшему
второе нажатие от меньшего значения к большему.

https://jsfiddle.net/cf8pakyL/6/
Я вроди как свернул их в объекты. но как менять местами пункты этих объектов не понятно.

Последний раз редактировалось Black_Star, 03.01.2018 в 17:28.
Ответить с цитированием
  #4 (permalink)  
Старый 03.01.2018, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сортировка блоков по значению в классах с реверсом
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);
    });
  });
});
Ответить с цитированием
  #5 (permalink)  
Старый 04.01.2018, 02:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Black_Star,
вариант без перемещения блоков ( flexbox order)
https://www.sitepoint.com/user-sorta...lexbox-jquery/
если понравится можно
в варианте выше строка 8 appendChild заменить на style, будет тоже самое

Последний раз редактировалось рони, 04.01.2018 в 02:42.
Ответить с цитированием
  #6 (permalink)  
Старый 04.01.2018, 02:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сортировка блоков по значению в классах с реверсом 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сортировка строк таблицы atanov Javascript под браузер 17 10.01.2018 18:10
Сортировка строк в таблице tvixa Элементы интерфейса 1 03.11.2015 13:28
Сортировка строк в таблице Apollon Общие вопросы Javascript 15 26.11.2013 03:18
Сортировка строк Chrome adamenko.artem Opera, Safari и др. 4 25.07.2013 16:27
Сортировка и отбор данных в браузере stopkran Ваши сайты и скрипты 22 09.12.2010 11:59