<!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(i){
var arr = [];
var el = $(this).nextUntil(".filter");
el.each(function(){
arr.push(this.textContent*1);
});
arr = arr.sort((a, b)=> a-b);
el.filter(":contains('"+arr[0]+"')").addClass("min");
el.filter(":contains('"+arr[arr.length-1]+"')").addClass("max");
});
</script>
</body>
</html>