javascript - 如何使用 php array_chunk 和 javascript 过滤器将项目保留在一行中？

Question

无法使用搜索选项找到答案，所以就在这里。

我有一个页面，其中包含我们客人的个人资料照片。使用 array_chunk 我将它们一次保留在 1 行上:

foreach (array_chunk($smoelenboek, 6, true) as $array) {
   echo '<div class="row">';
   foreach($array as $smoel) { 
     if(empty($smoel['foto'])){
       //nog geen foto ingevoerd    
       $foto = "/images/pasfotoman.jpg";
     }Else{
       //wel een foto ingevoerd    
       $foto = "/images/gastenfotos/".$smoel['foto'];     
     }
?>
     <div class="smoelfilter col-md-"><img title="<?=$smoel['voornaam']?>       
        <?=$smoel['achternaam']?>" src="<?=$foto?>"> <h3 class="fotonaam"><p>
        <b><?=$smoel['voornaam']?> <?=$smoel['achternaam']?></b></p></h3> 
     </div>
<?php  }
        echo '</div>';
}
?>

客人很多，所以我使用 javascript 添加了过滤字段:

<script>
   $("#filterveld").on('keyup', function(){ 
      $('.smoelfilter').hide();
      var txt = $('#filterveld').val();
      $('.smoelfilter').each(function(){
         if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) !== -1){
            $(this).show();
         }     
      });    
   });
</script> 

它有效，但是当我过滤客人时，他们都出现在不同的行上。 (这是有道理的)。

有人知道我该如何解决这个问题吗？

更新:编辑代码，不含行。

 //foreach loop en rows opmaken

        foreach($smoelenboek as $smoel) { 

        if(empty($smoel['foto'])){
        //nog geen foto ingevoerd    

           $foto = "/images/pasfotoman.jpg";



        }Else{
        //wel een foto ingevoerd    
         $foto = "/images/gastenfotos/".$smoel['foto'];     
        }


        ?>

          <div class="smoelfilter col-lg-2"><img style="height:auto;box-shadow:1px 1px 5px gray;" title="<?=$smoel['voornaam']?> <?=$smoel['achternaam']?>" src="<?=$foto?>"> <h3 class="fotonaam" style="text-align:center;"><p><b><?=$smoel['voornaam']?> <?=$smoel['achternaam']?></b></p></h3></div>


         <?php  }  ?>

部分输出:

<div class="smoelfilter col-lg-2" style="display: none;"><img style="height:auto;box-shadow:1px 1px 5px gray;" title="Bas Broens" src="/images/pasfotoman.jpg"> <h3 class="fotonaam" style="text-align:center;"><p><b>Bas Broens</b></p></h3></div>

<div class="smoelfilter col-lg-2" style="display: block;"><img style="height:auto;box-shadow:1px 1px 5px gray;" title="Christien Bevelander ( Hurkmans) " src="/images/pasfotovrouw.jpg"> <h3 class="fotonaam" style="text-align:center;"><p><b>Christien Bevelander ( Hurkmans) </b></p></h3></div>

result without filter

result with filter

Answer 1

根据我对您的问题的理解:

每行有6张个人资料图片，所以当你过滤它们时，一行中可能最多封装有6张个人资料图片，问题是，行中个人资料图片的数量确实会影响其显示，所以包含一张个人资料图片的行将在页面中保留一个整行 block ，就像其中有 6 个个人资料时一样。

因此，您应该更改显示个人资料图片的方式，尝试通过删除行来重新设计 HTML，使每个个人资料图片 div 显示为带有 100 的内联 block %/6 width(如果您使用 Bootstrap，则为 col-lg-2)，或者使用 AJAX 函数获取过滤后的数据并再次重建行。