如何使用JavaScript和正则表达式从标签div获取id值？

我有这样的示例代码：如何使用JavaScript和正则表达式从标签div获取id值？

<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？

来源

2012-11-19 Hai Truong IT

在新的浏览器，你可以使用'document.querySelector'或'document.querySelectorAll' – Pointy

通过“在JavaScript”你的意思是“没有jQuery的”？ – ruakh

@ruakh：是的，我不使用Jquery –

所以你正在寻找这样做的香草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的子测试，而不是一个正则表达式。

来源

2012-11-19 15:00:30

你并不需要一个正则表达式，如果你只是希望得到的是有一些字符串开头的ID的所有<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-19 15:00:52 Gabe

这不是你的问题的直接答案，但为什么你不使用类？ 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-19 15:20:50 bgusach

如何使用JavaScript和正则表达式从标签div获取id值？

回答

相关问题