如何匹配并标记日历中含指定日期值的div元素

问题描述 #

我通过JavaScript循环生成日历日期：

for (let i = 1; i <= lastDay; i++) {
    if (
        i === new Date().getDate() &&
            date.getMonth() === new Date().getMonth()
    ) {
        days += `<div class="today">${i}</div>`;
    } else {
        days += `<div>${i}</div>`;
    }
}

生成的DOM结构如下：

<div class="days">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <!-- ... 直到当月最后一天 -->
</div>

我从控制器向Twig模板传入了含会话日期的仓库数据，想通过JavaScript给所有日期div中，与{{ session.dayNumber }}匹配的元素添加marked类，但尝试的代码没生效：

for (i = 0; i < $(" .days div").length; i++) {
    if($( "div" ).html() == {{ session.dayNumber }}) {
        $("div").addClass("marked");
    }
}

目前已能通过原生JS打印所有日期文本：

const monElement = document.querySelector('.days');

for (let i = 0; i < monElement.children.length; i++) {
    console.log(monElement.children[i].textContent);
}

求可行的实现方法。

可行实现方法 #

方法1：原生JavaScript（和现有代码风格统一） #

基于你已经能获取日期元素的代码，直接在循环里判断并添加类：

const daysContainer = document.querySelector('.days');
// 将Twig变量转为数字，避免类型不匹配问题
const targetDay = Number({{ session.dayNumber }});

for (let i = 0; i < daysContainer.children.length; i++) {
    const dayElement = daysContainer.children[i];
    // 去除文本首尾空白并转为数字，防止空格/换行导致匹配失败
    const dayNumber = Number(dayElement.textContent.trim());
    
    if (dayNumber === targetDay) {
        dayElement.classList.add('marked');
        // 找到目标后终止循环，减少不必要操作
        break;
    }
}

方法2：jQuery修正版（针对你之前的错误代码优化） #

你之前的jQuery代码问题在于每次循环都选中了全局div，而非当前遍历的元素，同时没处理文本格式问题，修正后：

const targetDay = {{ session.dayNumber }};
// 遍历.days下的所有日期div
$('.days div').each(function() {
    // 转成整数并去除首尾空白
    const dayNumber = parseInt($(this).text().trim(), 10);
    if (dayNumber === targetDay) {
        $(this).addClass('marked');
        // 找到后停止遍历
        return false;
    }
});

关键注意点 #

• 类型匹配：务必把日期文本和session.dayNumber转为相同类型（比如都转成数字），避免字符串与数字的匹配误差（比如" 5 " == 5会失败）
• 元素定位：遍历操作时要针对当前元素，而非全局所有div
• 性能优化：找到目标元素后直接终止循环，减少无效DOM操作

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