javascript - 在 javascript 中使用正则表达式增量数字

Question

我试图通过它们的 id 隐藏元素：

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

但是有很多 div 像 Table1，Table2，Table3 ......

那么在这种情况下如何使用正则表达式呢？

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，您可以使用Selectors API来选择您需要隐藏的元素。

采用

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

选择 ID 以“Table”开头的所有元素，因此它是 Table1、Table2，还有 TableOfProducts，请记住这一点。

然后你需要遍历它并检查 id 属性是否匹配/^Table\d+$/正则表达式。

Answer 3

例如..如果您将 myTables 作为 div 的类名 ..将其用于 lenght ..

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

使用循环概念..这是一个例子..