如何使用 jQuery 选取具有相同 data 属性值的首个元素并应用样式

花韻仙語 2025-12-30 00:00:00 次阅读

本文介绍在 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 格式如 2025-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+），且避免了第三方库依赖，适合轻量级或现代化项目。