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

j0hnik,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .max {
    background-color: hsla(300, 100%, 50%, 1);
  }
  .min{
    background-color: hsla(210, 100%, 56%, 1);
  }
  .min.max{
    background-color: hsla(90, 100%, 49%, 1);
  }

  </style>
</head>

<body>
<div class="container--filter">
  <span class="filter">Высота подачи:</span>
  <span class="number_filter" data-for="Высота подачи">10</span>
  <span class="number_filter" data-for="Высота подачи">11</span>
  <span class="number_filter" data-for="Высота подачи">15</span>

  <span class="filter">Гарантия:</span>
  <span class="number_filter" data-for="Гарантия">3</span>

  <span class="filter">Мощность:</span>
  <span class="number_filter" data-for="Мощность">120</span>
  <span class="number_filter" data-for="Мощность">370</span>
  <span class="number_filter" data-for="Мощность">90</span>

  <span class="filter">Производительность:</span>
  <span class="number_filter" data-for="Производительность">18</span>
  <span class="number_filter" data-for="Производительность">21</span>
  <span class="number_filter" data-for="Производительность">24</span>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
  $('.filter').each(function(){
    var span = $(this).nextUntil('.filter').get();
    span.sort((a, b)=> a.textContent - b.textContent);
    $(span).first().addClass("min");
    $(span).last().addClass("max");
  });
  </script>

</body>
</html>
Ответить с цитированием