Форум

smart-create · #1 (**permalink**) 10.07.2017, 23:59

Доброй ночи, уважаемые знатоки. Прошу помочь

Имею вот такую структуру 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

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>

j0hnik · #3 (**permalink**) 11.07.2017, 01:43

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

рони · #4 (**permalink**) 11.07.2017, 01:48

Сообщение от j0hnik

Рони, какие дела?

не верно, но мысль хорошая.

j0hnik · #5 (**permalink**) 11.07.2017, 01:49

да где то накосячил, ща поправлю, так как дела?

рони · #6 (**permalink**) 11.07.2017, 02:51

песочница похоже не работает ...

j0hnik · #7 (**permalink**) 11.07.2017, 02:56

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

рони · #8 (**permalink**) 11.07.2017, 02:58

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>

j0hnik · #9 (**permalink**) 11.07.2017, 03:03

Рони отлично! но все вопрос открыт

рони · #10 (**permalink**) 11.07.2017, 03:04

Сообщение от j0hnik

можно ли в таком селекторе как то указать точное вхождение

можно сделать свой селектор, есть примеры на форуме

Форум

Справочник

Discord чат

Курсы javascript