javascript - JavaScriptで正規表現の増分数を使用する

Question

IDで要素を非表示にしようとしています：

document.getElementById('Table1').style.display = 'none';

しかし、Table1、Table2、Table3のような多くのdivがあります...

では、このような状況で正規表現を使用するにはどうすればよいでしょうか。

Answer 1

クラスをこれらすべての要素に設定します。そのような場合のために発明されました。

HTML:

<div id="Table1" class="myTables"></div>
<div id="Table2" class="myTables"></div>
<div id="Table3" class="myTables"></div>

JavaScript:

var elements = document.getElementsByClassName("myTables");
for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.display = "none";
}

---

更新:クラスの設定が適用できない場合は、属性がセレクターで始まるquerySelectorAll最新の方法をいつでも使用できます。

var elements = document.querySelectorAll("div[id^='Table']");
for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.display = "none";
}

デモ: http://jsfiddle.net/L2de8/

Answer 2

この例では、規則的な表現は機能しません。

すべての要素に共通のクラス名を使用するか、HTMLを変更できない場合は、SelectorsAPIを使用して非表示にする必要のある要素を選択できます。

使用する

var allElemsWithIdStartingFromTable =  document.querySelectorAll('[id^="Table"]');

IDが「Table」で始まるすべての要素を選択するには、Table1、Table2だけでなく、TableOfProductsにもなります。この点に注意してください。

次に、これを繰り返して、id属性が/^Table\d+$/正規表現と一致するかどうかを確認する必要があります。

Answer 3

たとえば、divのクラス名としてmyTablesを指定した場合は、長さの場合に使用します。

var elements = document.getElementsByClassName("myTables");//to know the length only..
        for(var i=0;i<elements.length;i++)
        {
        document.getElementById('Table'+i).style.display = 'none';
        }

ループの概念を使用します。その例です。