如何使用javascript和regex从tag 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

所以你想在没有加载jQuery库的情况下在vanilla Javascript中执行此操作？因为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的子字符串测试而不是正则表达式.