[Dilettante_Pro]

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

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