如何为页面所有非空textarea的最近span添加noted-dot类？

需求：页面有365个带localstoragesave类的textarea，当任意textarea内容非空时，给它最近的父级span元素添加noted-dot类；内容清空时移除该类。需要同时支持从localStorage加载内容后的初始化标记，以及用户输入时的实时更新。当前代码仅对第一个textarea生效，需适配所有元素。

修改后的JS代码 #

var elements = document.getElementsByClassName('localstoragesave');

// 核心：遍历所有textarea，更新对应span的标记类
function checkValidity() {
    for (let i = 0; i < elements.length; i++) {
        const textarea = elements[i];
        const parentSpan = textarea.closest("span");
        if (!parentSpan) continue; // 防止找不到父span报错
        
        if (textarea.value.trim() !== "") {
            parentSpan.classList.add("noted-dot");
        } else {
            parentSpan.classList.remove("noted-dot");
        }
    }
};

// localStorage 存储逻辑保留，仅修改input事件触发checkValidity
for (let i=0; i<elements.length; i++) {
 (function(element) {
   const id = element.getAttribute('id');
   element.value = localStorage.getItem(id + location.search);
   element.oninput = function() {
     localStorage.setItem(id + location.search, element.value);
     checkValidity(); // 输入时触发全量检查（或单元素检查，看需求）
   };
 })(elements[i]);
}

// 页面加载完成后初始化所有标记
window.onload = function() {
    checkValidity();
};

关键改动说明 #

• 完善checkValidity函数：从空函数改为遍历所有textarea，逐个检查内容状态，找到对应父span后添加/移除noted-dot类。使用trim()避免空格误判为非空。
• 移除无效变量：删掉没用的elementsParent，每个textarea单独调用closest("span")找自己的父容器，避免全局只取第一个元素。
• 初始化逻辑优化：window.onload不再只处理第一个textarea，直接调用checkValidity()完成所有元素的初始标记。
• 输入事件联动：保留原localStorage存储逻辑，确保用户输入时触发checkValidity()，实时更新对应span的类状态。

可选优化（按需选择） #

如果页面元素较多，全量遍历可能有点冗余，可以修改为单元素检查，减少性能消耗：

// 单元素版本的检查函数
function checkValiditySingle(textarea) {
    const parentSpan = textarea.closest("span");
    if (!parentSpan) return;
    
    if (textarea.value.trim() !== "") {
        parentSpan.classList.add("noted-dot");
    } else {
        parentSpan.classList.remove("noted-dot");
    }
}

// 输入事件里调用单元素检查
element.oninput = function() {
    localStorage.setItem(id + location.search, element.value);
    checkValiditySingle(element);
};

// 初始化时遍历所有元素调用单元素检查
window.onload = function() {
    for (let i = 0; i < elements.length; i++) {
        checkValiditySingle(elements[i]);
    }
};

内容的提问来源于stack exchange，提问作者Юра