使用通配符ID选择div

如何使用它的ID但使用widcard选择div?

如果DIV的ID是statusMessage_1098 ,我想以某种方式选择它,例如document.getElementById('statusMessage_*')

这是因为在生成页面之前,我不知道ID的后缀,并且页面中只会出现一个这样的ID。 这可能吗?

谢谢你的帮助。

使用jQuery你可以做到这一点

 $("div[id^='statusMessage_']") 

请参见attributeStartsWith

编辑 – 使用类名选择器

如果你可以使用类名,那么你可以使用这样的东西

 $$('div.myDivClass'); 

使用类’myDivClass’获取所有div元素

基于元素id属性的通配符解决方案

对的,这是可能的。 这可以直接回答您的问题,而无需依赖第三方JavaScript或API或元素ID以外的属性。 你也不必使用class =

自定义方法调用示例

 // Uses JavaScript regex features to search on id= attribute var arrMatches = document.getElementsByRegex('^statusMessage_.*'); 

这将获得一个数组,其中包含所有以“statusMessage_”开头的id(甚至是嵌套的)。

实现示例 – 可重用和通用

这是getElementsByRegex函数的一个实现,它从document开始在DOM中搜索给定的正则表达式。 为方便起见并根据预期行为将其附加到文档对象。

    

可能会有更高效的实现,但这个实现提供了一个开始。 function的主体可以根据品味用其他算法替换。

测试代码

最后,使用具有此类嵌套元素的HTML blurb进行测试

  
1
2
other stuff
3

此HTML块包含以id="statusMessage_开头的三个元素;因此警报测试将说明

“找到3场比赛 – 预计3场比赛”

变化的附录信息

如果要将搜索限制为仅div元素或其他某种特定元素,则需要将以下getElementByTagName代码注入算法以限制搜索的元素集。

 var arrDivs = document.getElementsByTagName("div"); // pull all divs from the doc 

您可能希望通过在第二个参数中传递标记名称来修改通用算法,以便在搜索开始之前进行过滤

 var arrMatches = document.getElementsByRegex('^statusMessage_.*', 'div'); 

只是认为用JavaScript更新的方式来更新线程是值得的,因为搜索中仍会出现这种情况。

 document.querySelector("[id^='statusMessage_']"); 

caniuse.com列出它可用于IE8的ID和其他浏览器的强大支持。

在jquery中,最简单的方法是为每个div分配一个类,让’stateMessage’类似于:

 
...

为了得到它们:

 $('.statusMessage') // or $('div.statusMessage') //or $('div[id^=statusMessage_]') 

没有jquery:

 var divs = document.getElementsByTagName('div'); for(var i=0;i 
 function switch2 (elementid) { var divs = document.getElementsByTagName("div"); for ( var i = 0; divs[i]; i++ ) { if (divs[i].id.indexOf("statusMessage_") == 0) { document.getElementById (divs[i].id).style.display = "none"; } } } 

只需替换document.getElementById (divs[i].id).style.display = "none"; 使用任何CSS来应用于所有具有以statusMessage_开头的id的div。

我不确定你是如何填充它但如果它来自后面的代码你可以尝试类似的东西:

 document.getElementById('statusMessage_<%= generatedID %>') 

其中generateID是从后面的代码生成的ID。

通常在css中执行此操作的方法是为元素提供除了其唯一ID之外的“statusMessage”类。 然后,您可以使用选择器创建一个css规则,该选择器将影响该类的所有元素。 例如

  .statusMessage {color: red;} 

请记住,元素可以有多个类。 例如

 

如果您不想使用jQuery,那么还有另一种更简单的方法:

分配一个class – 例如将其命名为“message”,并使用以下命令:

 function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } 

在这里你怎么称呼它:

 var messages = getElementsByClass("message"); for(var index=0; index < messages.length; index++) { // prompt the content of the div //alert(message[index].innerText); }