javascript - 如何使用 javascript 和 regex 从标签 div 获取 id 值？

Question

我有这个示例代码:

<div id="click-test-1">Click test 1</div>
<div id="click-test-2">Click test 2</div>

在 jQuery 中我使用以下代码:

jQuery("div[id^=\'click-test\']").click(...);

如何在基本 JavaScript 中获得相同的效果？

Answer 1

所以您希望在普通 Javascript 中执行此操作，而不加载 jQuery 库？因为 jQuery 就是 Javascript。

如果您不必担心支持旧版浏览器(特别是 IE7 及以下版本)，您可以使用 document.querySelector (获取单个匹配元素)或 document.querySelectorAll (获取所有匹配元素的数组)通过 CSS 选择器查找元素:

var elems = document.querySelectorAll("div[id^=\'click-test\']")
for (var i=0; i<elems.length; ++i) {
    elems[i].click()  
    // Note that click() is also browser/element-type-dependent without jQuery
}

如果您确实需要担心支持其他浏览器，那么确实没有办法，只能执行 document.getElementsByTagName('div') ，然后循环检查结果，对照每个元素的 id正则表达式。

var elems = document.getElementsByTagName('div')
for (var i=0; i<elems.length; ++i) {
    if (elems[i].id.match(/^click-test/)) {
        elems[i].click()
    }
}

在查找前缀的特定情况下，您可以使用 Gabe 的子字符串测试而不是正则表达式。