Найти максимальное и минимальное значение в элементах DOM
Доброй ночи, уважаемые знатоки. Прошу помочь
Имею вот такую структуру DOM элементов: <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> Мне нужно найти среди элементов ".number_filter" элементы с максимальным и минимальным значением .text(), а потом добавить к этим элементам какой либо класс, пусть будет ".test" Получиться должно так: <div class="container--filter"> <span class="filter">Высота подачи:</span> <span class="number_filter test" data-for="Высота подачи">10</span> //минимальное значение <span class="number_filter" data-for="Высота подачи">11</span> <span class="number_filter test" data-for="Высота подачи">15</span> //максимальное значение <span class="filter">Гарантия:</span> <span class="number_filter test" data-for="Гарантия">3</span> //минимальное и максимальное значение <span class="filter">Мощность:</span> <span class="number_filter" data-for="Мощность">120</span> <span class="number_filter test" data-for="Мощность">370</span> //максимальное значение <span class="number_filter test" data-for="Мощность">90</span> //минимальное значение <span class="filter">Производительность:</span> <span class="number_filter test" data-for="Производительность">18</span> //минимальное значение <span class="number_filter" data-for="Производительность">21</span> <span class="number_filter test" data-for="Производительность">24</span> //максимальное значение </div> Пытаюсь я это сделать следующим скриптом: var arr_1 = new Array(); $('[data-for="'+$title+'"]').each(function(){ // начинаем гулять по элементам data-for="Высота подачи", ata-for="Производительность" и т.д. arr_1.push($(this).text()); //запихиваем в массив числовое значение которое содержит текущий элемент str = arr_1.join('.'); //преобразуем массив в строку с разделителем "." var $min = Math.min.apply( Math, str.match(/\d+/g)), //находим минимальное значение строки $max = Math.max.apply( Math, str.match(/\d+/g)); //находим максимальное значение строки if ( ($(this).text() == $min) || ($(this).text() == $max) ){ $(this).addClass('test'); // добавляем класс ".test" если значение текущего элемента равно максимальному или минимальному значению } }) НО этот скрипт добавляет класс ".test" всем элементам в наборе, насколько я вижу из консоли из-за того что мое значение str не сразу принимает все значения $(this).text(), а по одному, то есть походу работы цикла each. То есть сначала затягивается только по одному значению для каждого [data-for="'+$title+'"], а класс ".test" в этот момент уже добавился, потому что раз уж значение одно то оно и минимально и максимальное сразу, ну и т.д. Пока each дойдет до конца и окончательно сформируется str, у меня уже все элементы имеют класс ".test". Вопрос скорее всего заключается в том как мне получить str не по одному значению (по ходу цикла), а уже в конце цикла, то есть что бы в нем был полный набор значений? Тогда я смогу вытащить из него актуальное значение min и max Или, если я изобрел какой то велосипед подскажите пожалуйста как сделать правильно |
smart-create,
<!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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var temp = {}; $("[data-for]").each(function(indx, el) { var data = $(el).data("for"), num = +$(el).text(); if (!temp[data]) temp[data] = { min: el, max: el }; var min = temp[data].min, max = temp[data].max; if (+min.textContent > num) { min.classList.remove("min"); min = temp[data].min = el } if (+max.textContent < num) { max.classList.remove("max"); max = temp[data].max = el } min.classList.add("min"); max.classList.add("max") }) }); </script> </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> </body> </html> |
<!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> |
Цитата:
|
да где то накосячил, ща поправлю, так как дела?
|
:( песочница похоже не работает ...
|
заработало! Рони хелп, $("div:contains('3')") можно ли в таком селекторе как то указать точное вхождение? если цифра 3 чтобы не матчилась 30 или 300? |
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> |
Рони отлично! но все вопрос открыт
|
Цитата:
|
Часовой пояс GMT +3, время: 16:50. |