使用Javascript筛选从PHP返回的项目

我正在寻找一种方法来过滤我从后端获得的项目。基本上，我所做的是

<div class="items">
   <?php foreach ($items as $item) { 
    <a> $item </a> }
 ?>
</div>

我希望通过将打印时间分为

上午

，从

09:00:00到12:00:00

和从

12:00:00到18:00:00

的一天来过滤这些打印时间

因此，我将有一个名为“早晨”的过滤器按钮，当我单击该按钮时，我只想打印9到12之间的时间，如果单击“日”按钮，则只打印13到15之间的时间

---

我尝试从后端发送过滤后的项目，但速度较慢，因为我有很多次，我认为从Javascript/Angular发送过滤后的项目会更好，但我不确定具体如何开始。任何帮助都将不胜感激

如果可以在服务器端进行过滤，则效果更好。然而，如果你想有一个方法来做它的前端，你可以使用下面的代码

我认为您将向用户显示您的数组<代码>项目< /代码>。如果用户单击按钮

上午

（分别为

下午

），则项目将被过滤以获得相应的值

<script type="text/javascript">

var items = "<?php echo $items ?>"; 

var saveItems = items;

$("#morning").on("click", function(){

 items = saveItems.filter(element => element < "12:00:00 ")
})

$("#afternoon").on("click", function(){

 items = saveItems.filter(element => element > "12:00:00")
})
$("#reset").on("click", function(){

 items = saveItems
})
</script>

<button id="morning">Morning </button>
<button id="afternoon">Afternoon </button>
<button id="reset">Reset </button>

var项目=”；
var saveItems=项目；
$（“#上午”）。在（“单击”，函数（）{
items=saveItems.filter（元素=>元素<“12:00:00”）
})
$（“#下午”）。在（“单击”，函数（）{
items=saveItems.filter（元素=>element>“12:00:00”）
})
$（“#重置”）。在（“单击”，函数（）{
项目=保存项目
})
早晨
下午
重置

假设您有这样一个时间数组：

myArray=[
"12:00:00", 
"13:00:00",
"14:00:00",
"15:00:00",
"09:00:00"
]
var n=myArray.length；
函数A（）{
对于（变量i=0；i如果PHP代码中的foreach循环中有（9，则可以在每个项上设置一个过滤器类。类似于：

$hour = explode( ':', $item)[0] );
$class = $hour <= 12 : 'morning' : 'day';
echo "<a class='$class' >$item</a>";

$hour=explode（“：”，$item）[0]）；
$class=$hour如果你想用javascript进行任何类型的客户端时间显示/评估/操作，那么在你花很长时间编写自定义代码之前，你应该检查一下。它几乎可以完成你所能想到的所有与时间有关的事情。
你应该添加你正在使用的服务器端代码，也许我们可以优化，你可以避开我们将jquery前端用于大型数据集，因为这会挂起您的浏览器。将筛选推送到客户端对您的用户来说不会加快任何速度。您应该在查询过程中进行筛选以获得最佳性能。如果我从后端执行此操作，查询将再次通过大量API方法，我可以对其进行筛选以显示这些时间，但是t用户必须使用这些过滤器再次提交表单，我的系统将需要时间再次查询。如果我从客户端执行此操作，我将只隐藏/过滤浏览器中已显示的项目
$hour = explode( ':', $item)[0] );
$class = $hour <= 12 : 'morning' : 'day';
echo "<a class='$class' >$item</a>";