本文介绍在 wordpress 等动态页面中，如何精准定位并样式化每个日期组内的首个事件元素——通过 jquery 遍历 data-date 属性，结合 :first 伪类选择器实现高效、语义化的 dom 操作。
在实际前端开发中（尤其是 WordPress 自定义日程表等场景），常需对“同一天的多个事件中仅第一个”进行特殊样式处理（如添加边框、高亮背景或图标）。由于 HTML 结构中无法预先按日期分组，直接依赖 class 名匹配存在歧义（如多个日期共用相似 class），因此推荐使用语义更清晰、可维护性更强的 data-date 自定义属性替代纯 class 方案。
✅ 推荐方案：基于 data-date 的 jQuery 选择
以下代码在 DOM 加载完成后执行，自动识别所有具有相同 data-date 值的元素，并为每组中的第一个匹配项添加 CSS 样式：
$(document).ready(function() {
// 遍历每个事件容器（根据你的实际结构调整选择器）
$(".ct-nestable-shortcode").each(function() {
// 获取当前容器内子元素的 data-date 值
const dateValue = $(this).find("> div").data("date");
// 全局查找所有 data-date 值等于该值的元素，并仅选中第一个
$(`[data-date="${dateValue}"]:first`).css("background-color", "#fff9c4");
});
});⚠️ 注意事项：务必引入 jQuery（建议使用 CDN，如 ）；data-date 值应确保全局唯一且格式规范（推荐使用 ISO 格式如 2024-03-15 或哈希化日期字符串，避免空格/特殊字符）；若事件结构嵌套较深，请调整 $(this).find("> div") 中的选择器，确保准确提取目标 data-date；生产环境建议将 .css() 替换为 .addClass("first-of-date")，并在 CSS 中统一管理样式，提升可维护性：
.first-of-date {
border-top: 2px solid #2196f3;
padding-top: 8px;
}? 替代方案：纯 JavaScript（无 jQuery 依赖）
若项目已弃用 jQuery，可用现代原生 API 实现等效逻辑：
document.addEventListener("DOMContentLoaded", () => {
// 收集所有带 data-date 的元素
const allEvents = document.querySelectorAll("[data-date]");
const dateGroups = new Map();
allEvents.forEach(el => {
const date = el.dataset.date;
if (!dateGroups.has(date)) {
dateGroups.set(date, []);
}
dateGroups.get(date).push(el);
});
// 为每组首个元素添加类名
dateGroups.forEach((elements, date) => {
elements[0]?.classList.add("first-of-date");
});
});该方法兼容性好（支持 IE11+），且避免了第三方库依赖，适合轻量级或现代化项目。
综上，核心思路是“分组 → 取首 → 样式化”。优先使用 data-* 属性保证语义与健壮性，再配合 jQuery 或原生 JS 实现精准控制——这不仅解决了 WordPress 日程表的首事件高亮需求，也为类似“按属性归类并操作首项”的通用场景提供了可靠范式。
