如何使用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值？

回答

相關問題