検索後のdivの並べ替え

Question

divを検索して検索したものを表示するシンプルな関数を作成しました。しかし、私はそれらを並べ替えることができません。それは、ユーザーが入力したテキストと等しくないものを隠すだけです。

私はこのようなmaterializecssグリッドシステムを使用していますが、それはカードをたくさん持っている：

<div class="row"> 
<div class="col s12 m4"> 
    <div class="card samll"> 
     <div class="card-image waves-effect waves-block waves-light teal lighten-1"> 
     <img class="activator" src="https://..."> 
     </div> 
     <div class="card-content"> 
     <span class="card-title activator grey-text text-darken-4">Skruf<i class="material-icons right">more_vert</i></span> 
     <p><a id="id" class="aaf" onClick="reply_click(this.id)">Button</a></p> 
     </div> 
     <div class="card-reveal"> 
     <span class="card-title grey-text text-darken-4">Some Title<i class="material-icons right">close</i></span> 
     <p>Some longer text.</p> 
     </div> 
    </div> 
</div> 

そして、これは私がdiv要素を検索しています方法です：

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis == "") { 
     $('.card').show(); 
    } else { 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide(); 
     }); 
    }; 
}); 

あなたが作業のデモを見ることができますhere。あなたはここで今

$('#brandSearch').keyup(function() { 
 
    var valThis = $(this).val().toLowerCase(); 
 
    if (valThis == "") { 
 
     $('.card').show(); 
 
    } else { 
 
     $('.card').each(function() { 
 
      var text = $(this).text().toLowerCase(); 
 
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide(); 
 
     }); 
 
    }; 
 
});

を隠している要素の親要素を非表示にする必要があり

Answer 1

は、私はそれが動作することを願っています、あなたの修正JSです。