Javascript-форум - Селектор по среднему значению атрибута data

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Селектор по среднему значению атрибута data (https://javascript.ru/forum/events/69729-selektor-po-srednemu-znacheniyu-atributa-data.html)

Селектор по среднему значению атрибута data

Добрый день помогите пожалуйста разобраться. Есть скрипт:

for (var i = 0; i < other_arr.length; i++) {
	var $other_name = other_arr[i].split('|')[0], // значение data атрибуту которое мы принимаем за название и в дальнейшем ищем внутри него нужный элемент;
	      $other_min = other_arr[i].split('|')[1], // минимальное допустимое значение 
	      $other_max = other_arr[i].split('|')[2], // максимальное допустимое значение

	$('.product').each(function(){
		$(this).find('[data-filter_name="'+$other_name+'"]').each(function(){
			$(this).data('filter_val')  // этот скрипт выберет все значения из [data-filter_val], а мне нужно что бы он выбрал только то значение [data-filter_val] которое находиться в приделах $other_min <= $(this).data('filter_val') <= $other_max
		})
	})
}

Например $other_min, равен 50; $other_max, равен 100, скрипт должен выбрать все значения [data-filter_val] которые лежат в приделах от 50 до 100.

Заранее премного благодарен:)

<div class="product">
  <div data-filter_name="foo" data-filter_val="10"></div>
<div class="product">
  <div data-filter_name="foo" data-filter_val="50"></div>
</div>
<div class="product">
  <div data-filter_name="foo" data-filter_val="100"></div>
</div>

<script>
   var other_arr = ['foo|50|200'];

   for (var i = 0; i < other_arr.length; i++) {
      var $other_name = other_arr[i].split('|')[0],
      $other_min = parseInt(other_arr[i].split('|')[1], 10),
      $other_max = parseInt(other_arr[i].split('|')[2], 10);
     
      $('.product').find('[data-filter_name="'+$other_name+'"]').filter(function(){
         var val = parseInt($(this).data('filter_val'), 10);
         return  val >= $other_min && val <= $other_max;
      });
   }
</script>

fearmear.wrk, спасибо большое за участие и помощь.

Как по мне это решение самое правильное в данном случае. Но я не могу разобраться почему у меня не выходит получить значение val, даже в тестовом режиме, через console.log(val) - не выводит нечего.

Ради интереса пробовал вместо return val >= $other_min && val <= $other_max; написать просто return val, тоже нечего. НО если поставить console.log(val) до return, то результат есть, НО выводится конечно же все значение без фильтрации.

Пробовал даже обернуть ваш скрипт в function test () {}. А потом получить значение как результат выполнения этой функции, тоже нечего.

Хотя нет, в таком случае я получаю "undefinded".

Подскажите пожалуйста что я делаю не так?

Я понял логику скрипта, понял что именно он должен выдать. НО самое главное я понять не могу, как мне получить значение val уже после всех манипуляций в .filter()

С выводом в консоль

<div class="product">
  <div data-filter_name="foo" data-filter_val="10"></div>
<div class="product">
  <div data-filter_name="foo" data-filter_val="50"></div>
</div>
<div class="product">
  <div data-filter_name="foo" data-filter_val="100"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
   var other_arr = ['foo|50|200'];

   for (var i = 0; i < other_arr.length; i++) {
      var $other_name = other_arr[i].split('|')[0],
      $other_min = parseInt(other_arr[i].split('|')[1], 10),
      $other_max = parseInt(other_arr[i].split('|')[2], 10);
     
      $('.product').find('[data-filter_name="'+$other_name+'"]').filter(function(){
         var val = parseInt($(this).data('filter_val'), 10);
         if(val >= $other_min && val <= $other_max) console.log(val);
      });
   }
</script>

Или, с формированием результирующего массива

<div class="product">
  <div data-filter_name="foo" data-filter_val="10"></div>
<div class="product">
  <div data-filter_name="foo" data-filter_val="50"></div>
</div>
<div class="product">
  <div data-filter_name="foo" data-filter_val="100"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
   var other_arr = ['foo|50|200'],
         result = [];

   for (var i = 0; i < other_arr.length; i++) {
      var $other_name = other_arr[i].split('|')[0],
      $other_min = parseInt(other_arr[i].split('|')[1], 10),
      $other_max = parseInt(other_arr[i].split('|')[2], 10);
     
      $('.product').find('[data-filter_name="'+$other_name+'"]').filter(function(){
         var val = parseInt($(this).data('filter_val'), 10);
         if(val >= $other_min && val <= $other_max) result.push(val);
      });
   }
   alert(result);
</script>

Dilettante_Pro, Спасибо большое, Вы очень помогли.

Если вас не затруднит загляните еще пожалуйста сюда

Эту тему тоже создал я, и буду очень благодарен за помощь

smart-create,
Ответил в той теме