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。

Answer 1

您需要隐藏您现在隐藏的元素的父元素

＆＃13;

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

＆＃13;

这是你修改过的JS，我希望它能运作。

搜索后重新排序div

1 个答案: