Laravel Blade视图中如何用jQuery在@foreach中正确渲染处理后的chunk数据

嘿，我来帮你搞定这个问题！你现在的核心问题是：循环渲染的每个.time div需要对应显示各自chunk处理后的timelast，但当前的jQuery代码没法精准匹配到每个元素，导致所有div内容要么一致要么出错。下面给你分步解决：

第一步：修改Blade循环，给每个div绑定专属时间数据 #

首先要让每个.time元素能拿到自己对应的原始timelast值，我们可以用HTML的data-*属性来存储：

@foreach($chunks as $chunk)
    <div class="time" style="display:inline" data-timelast="{{ $chunk->timelast }}"></div>
@endforeach

这样每个div都自带了属于自己的原始时间字符串，后续jQuery可以精准获取。

第二步：修改jQuery代码，逐个处理每个元素 #

现在我们需要遍历所有.time元素，取出各自的data-timelast值，处理后再填充回对应的div里：

$(function() {
    // 遍历每个.time元素，确保每个元素都处理自己的时间
    $('.time').each(function() {
        // 获取当前元素绑定的原始时间字符串
        var timelast = $(this).data('timelast');
        // 分割时间字符串（适配YYYY-MM-DD HH:MM:SS格式）
        var t = timelast.split(/[- :]/);
        // 创建Date对象（注意月份是从0开始计数的，所以要减1）
        var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
        
        // 这里可以根据你的需求格式化日期，示例转成YYYY-MM-DD HH:MM:SS格式
        var formattedDate = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
        
        // 将处理后的时间填充到当前div中
        $(this).text(formattedDate);
    });
});

顺便帮你指出原来代码的几个问题 #

1. 没有遍历元素：原来的代码只处理了一个timelast值，而且是Blade渲染时最后一个chunk的值，导致所有.time div都显示同一个内容
2. 字符串未加引号：var timelast={{$chunk->timelast}}; 如果timelast是字符串格式（比如2024-05-20 12:30:00），会直接报错，需要加引号，但即使加了也只能拿到最后一个chunk的时间
3. 错误的变量引用：$('.time').text("d"); 里的"d"是字符串，不是你创建的Date变量d，而且直接显示Date对象会得到默认的字符串格式，通常不是我们想要的

额外小技巧：如果不需要前端处理，直接用Blade+Carbon更简单 #

如果你不需要用jQuery处理时间，完全可以在后端用Laravel自带的Carbon类直接格式化，省掉前端代码：

@foreach($chunks as $chunk)
    <div class="time" style="display:inline">
        {{ \Carbon\Carbon::parse($chunk->timelast)->format('Y-m-d H:i:s') }}
    </div>
@endforeach

内容的提问来源于stack exchange，提问作者robspin