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的子字符串测试而不是正则表达式。

Answer 2

如果您只是希望获得所有<div>的id，以某些字符串开头，那么您不需要正则表达式...您可以这样做：

jsFiddle

var children = document.body.getElementsByTagName('div');
var elements = [], child;
for (var i = 0, length = children.length; i < length; i++) {
   child = children[i];
   if (child.id.indexOf("click-test") == 0)
   // if you want to use a regex, just replace this condition with
   // if (child.id.match(/^click-test/))
      elements.push(child);
}

Answer 3

这不是你问题的直接答案，但你为什么不只使用课程？ getElementByClassName将完成工作。

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

这样的东西（我还没有测试过）：

var collection = document.getElementsByClassName('click_me');

for(var i=0, leng=collection.length; i<leng; i++)
{
    collection[i].click();
}

也许我没有考虑你的整个背景，但我会说使用id来分组元素是一种不好的做法。

如何使用javascript和regex从tag div获取id值？

3 个答案: