jquery隐藏并显示在列表中

Question

<div class="card-media">
  <!-- media container -->
  <div class="card-media-object-container">
    <div class="card-media-object"><img data-original="{{asset($ad->images()->first()->image_path.'/'.$ad->images()->first()->image_name)}}" height="125px" width="100%"></div>
  </div>
  <!-- body container -->
  <div class="card-media-body">
    <div class="card-media-body-top">
      <span class="subtle">{{$ad->time_elapsed_string($ad->created_at)}}</span>
    </div>
    <span class="title card-media-body-heading"><a href="ad/{{$ad->id}}">{{$ad->title}}</a></span>
    <div class="card-media-body-supporting-bottom">
      <span class="card-media-body-supporting-bottom-text subtle">
        <ol class="breadcrumb">
          <li class="categorie">{{$ad->categorie->name}}</li>
          <li class="subcategorie">{{$ad->subcategorie->name}}</li>
          <li class="type active">{{$ad->type->name}}</li>
        </ol>
      </span>
      <span id="price" style="color: red;" class="card-media-body-supporting-bottom-text subtle u-float-right">{{$ad->price}}</span>
    </div>
    <div class="card-media-body-supporting-bottom card-media-body-supporting-bottom-reveal">
      <span class="card-media-body-supporting-bottom-text subtle">{{$ad->phone}}</span>
      <a href="/ad/{{$ad->id}}" class="card-media-body-supporting-bottom-text card-media-link u-float-right">ДЭЛГЭРЭНГҮЙ</a>
    </div>
  </div>
</div>

这是我的重复列表，我想隐藏选择值

  <select id="test" multiple class="form-control">
    <option>1</option>
    <option>100</option>
    <option>1000</option>
    <option>10000</option>
    <option>100000</option>
    <option>1000000</option>
  </select>
$('#test').on('change',function(){
  var selected = this.value;
  prices = $('#price');
  $.each(prices,function(){
  if(selected<$(this).text()){
    $(this).parent().parent().parent().hide();
  }
  if(selected>$(this).text()){
    $(this).parent().parent().parent().show();
  }
});
});

当我从select中选择值时，这是我的jquery，如果#price value＆lt;比我选择隐藏其他列表元素卡片媒体是列表项。