如何在jQuery中绑定数据值到id，并在Laravel循环中设置id为$key？

问题1：如何在jQuery中将数据值绑定到元素的id？ #

其实操作起来很直接，jQuery的attr()方法就能搞定元素属性的修改，包括id。假设你已经拿到了要绑定的数据值，举个实际例子：

// 比如你的数据值是从接口或变量里拿到的
const targetId = "user_profile_456";
// 选中目标元素，把它的id设置为这个数据值
$(".your-target-element").attr("id", targetId);

这里要注意HTML的id命名规则，别踩坑：

• 必须以字母（A-Z/a-z）开头
• 只能包含字母、数字、连字符（-）、下划线（_）、冒号（:）和点号（.）
• 绝对不能有空格或特殊符号（比如!、@、#这类）

如果你的原始数据值可能带空格或特殊字符，建议先处理一下：

const rawData = "My Event List";
// 把空格换成连字符，转成小写，生成合法id
const validId = rawData.replace(/\s+/g, "-").toLowerCase();
$(".your-target-element").attr("id", validId);

问题2：嵌套foreach循环中设置div的id为$key的正确实现 #

看了你给的代码片段，核心思路没问题，但可能在id合法性和循环层级上有疏漏，给你调整后的正确写法：

@foreach ($data as $key => $cardData)
  <div class="event-list__current-events-section">
    <div class="event-list__current-schedule">
      <h1 class="modules-title">{{ ucwords(trans($key)) }}</h1>
      <!-- 用Str::slug处理$key，确保id合法唯一 -->
      <div id="{{ Str::slug($key) }}">
        <!-- 内层循环遍历当前分类下的所有卡片 -->
        @foreach ($cardData as $card)
          <div class="event-card">
            <!-- 这里填充卡片的具体内容，比如标题、详情等 -->
            <h3>{{ $card->title }}</h3>
            <p>{{ $card->description }}</p>
          </div>
        @endforeach
      </div>
    </div>
  </div>
@endforeach

几个关键提醒： #

1. 处理非法id字符：直接用$key当id风险很高，如果$key带空格或特殊符号，会违反HTML规范。Laravel的Str::slug()方法能自动把空格换成连字符、过滤特殊字符，生成符合要求的id，比如"Summer Events"会变成"summer-events"。
2. 嵌套循环层级要对：内层的卡片循环必须包裹在id="{{ $key }}"的div里面，这样同一分类下的所有卡片才会被放到正确的容器里，不会出现结构混乱。
3. 避免重复id：要确保$data里的每个$key都是唯一的，如果可能重复，建议给id加个前缀，比如id="event-group-{{ Str::slug($key) }}"，防止多个div共用同一个id导致JS选择器出错。

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