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

Question

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

我有一个页面，上面有我们客人的个人资料图片。使用 array_chunk 我将它们一次保留在 6 行上：

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>

不带过滤器的结果

带过滤器的结果

Answer 1

基于我从您的问题中了解到的内容：

每行中有 6 张个人资料图片，因此当您过滤它们时，您可能最多将 6 张个人资料图片封装在一行中，这就是问题所在，该行中的个人资料图片

数量确实会影响其显示，因此具有一张个人资料图片的行将保留页面中的全行块，就像其中有 6 个个人资料时一样。

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