Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2017, 23:59
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Найти максимальное и минимальное значение в элементах 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

Или, если я изобрел какой то велосипед подскажите пожалуйста как сделать правильно
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2017, 00:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2017, 01:43
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>

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

Сообщение от j0hnik
Рони, какие дела?
не верно, но мысль хорошая.
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2017, 01:49
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

песочница похоже не работает ...
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2017, 02:56
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

и редактирование =(
заработало!
Рони хелп, $("div:contains('3')") можно ли в таком селекторе как то указать точное вхождение? если цифра 3 чтобы не матчилась 30 или 300?

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

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>
Ответить с цитированием
  #9 (permalink)  
Старый 11.07.2017, 03:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Рони отлично! но все вопрос открыт
Ответить с цитированием
  #10 (permalink)  
Старый 11.07.2017, 03:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от j0hnik
можно ли в таком селекторе как то указать точное вхождение
можно сделать свой селектор, есть примеры на форуме
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Найти значине ID зная значение Class a11igator Общие вопросы Javascript 7 04.03.2013 11:51
Найти значение фактариала ivaszheka Общие вопросы Javascript 1 30.10.2012 09:34
Помогите найти абсолютное значение на Java!) Заранее спасибо!) Anastasiy17 Серверные языки и технологии 3 27.09.2012 23:26
помогите найти стандарты DOM zloctb Общие вопросы Javascript 2 06.12.2011 13:17
Где найти справочник методов DOM? master_alf Events/DOM/Window 6 16.04.2010 12:25