0

我有这个示例代码：

<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 中得到同样的东西？

4

3 回答 3

5

因此，您希望在没有加载 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
}

如果您确实必须担心支持其他浏览器，那么实际上没有办法，只能执行 adocument.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 的子字符串测试而不是正则表达式。

于 2012-11-19T15:00:30.363 回答
1

这不是您问题的直接答案，但是您为什么不直接使用类呢？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 对元素进行分组是一种不好的做法。

于 2012-11-19T15:20:50.453 回答
1

如果您只是想获取所有具有以某个字符串开头的 id 的 's，则不需要正则表达式<div>...您可以简单地这样做：

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);
}
于 2012-11-19T15:00:52.240 回答