搜索后重新排序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();
        });
    };
});

您可以在此处查看工作演示。

Answer 1

您需要隐藏当前隐藏的元素的父元素

 $('#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(); }); }; }); 

这是您修改后的JS，希望它能正常工作。