javascript - document.getElementById 对于不同的 "id"值或此代码的替代方案

Question

实际上，我正在尝试为某些标记为可内容编辑的“”的内容创建一个“自动保存”系统。

DIVS 的结构与他的类似。

<div id=test_one contenteditable=true>
<div id=test_other contenteditable=True>
[..]

有一个像这样的函数，仅适用于一个 div(当用户停止在 div 上书写时保存数据)

var timeoutId;
document.getElementById('test_one').addEventListener("input", function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {    
          function_to_save();    
    }, 1000);
}, false);

问题是我尝试对所有 id 名称包含单词“test”的 div 使用相同的函数，因为所有这些名称都是动态生成的...

我尝试使用正则表达式，但我无法使其工作......有什么想法或替代代码吗？

Answer 1

您可以使用querySelectorAll获取节点列表

var elems = document.querySelectorAll("[id*='test']");

由于问题被标记为 jQuery

var elems = $('[id*='test']');

[id^='test'] 将匹配所有以 test 开头的 id。
[id$='test'] 将匹配所有以 test 结尾的 id。
[id*='test'] 将匹配所有包含 test 的 id。

使用nodeList，你必须迭代

var elems = document.querySelectorAll("[id*='test']");

for (var i=elems.length; i--;) {
    elems[i].addEventListener("input", functionName, false);
}