Переупорядочить divs после поиска

Question

Я создал простую функцию, которая выполняет поиск по divs и показывает поиск. Однако я не могу их переупорядочить. Он просто скрывает те, которые не совпадают с введенным пользователем текстом.

Я использую систему 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> 

И это, как я ищу через дивы:

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

Вам нужно скрыть родительский элемент элемента, который вы прячете в настоящее время

$('#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, я надеюсь, что он будет работать.