javascript - javascriptと正規表現を使用してタグ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ライブラリをロードせずに、バニラ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')他のブラウザのサポートについて心配する必要がある場合は、 a を実行してから、正規表現に対して各要素の 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

これはあなたの質問に対する直接的な答えではありませんが、クラスを使用しないのはなぜですか? 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 を使用することは悪い習慣だと思います。

Answer 3

<div>何らかの文字列で始まる ID を持つすべての を取得するだけの場合は、正規表現は必要ありません...次のように簡単に実行できます。

jsフィドル

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);
}