Javascript 使用通配符ID选择div_Javascript_Jquery_Dom_Prototypejs

Javascript 使用通配符ID选择div

javascript jquery dom

Javascript 使用通配符ID选择div,javascript,jquery,dom,prototypejs,Javascript,Jquery,Dom,Prototypejs,如何使用ID和widcard选择一个div 如果DIV的ID是statusMessage_1098，我想用类似document.getElementById（'statusMessage_*'）的方式选择它这是因为在生成页面之前，我不知道ID的后缀，一个页面中只会出现一个这样的ID。这可能吗谢谢您的帮助。使用jQuery您可以做到这一点 $("div[id^='statusMessage_']") $("div[id^=statusMessage_]") 请参见编辑-使用类名选择器如

如何使用ID和widcard选择一个div

如果DIV的ID是

statusMessage_1098

，我想用类似

document.getElementById（'statusMessage_*'）

的方式选择它

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

谢谢您的帮助。

使用jQuery您可以做到这一点

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

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

请参见

编辑-使用类名选择器

如果可以使用类名，那么可以使用类似这样的名称

$$('div.myDivClass');

<body>

<div id="statusMessage_1">1</div>
<div id="statusMessage_2">2
    <div id="content">other stuff</div>
    <div id="statusMessage_3">3</div>
</div>

<script>
   // a quick test to see if you get the expected result.
   var arrMatches = document.getElementsByRegex('^statusMessage_.*');
   alert('found ' + arrMatches.length + ' matches - expected 3.')
</script>

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

获取类为“myDivClass”的所有div元素。

我不确定您是如何填充它的，但如果它来自后面的代码，您可以尝试以下操作：

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

<div id="statusMessage_<%=someid%>" class="statusMessage">...</div>

document.getElementById（'statusMessage_U2;'

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

在css中，通常的方法是除了元素的唯一ID之外，还为元素提供一个类“statusMessage”。然后，您可以创建一个带有选择器的css规则，该选择器将影响该类的所有元素。乙二醇

 .statusMessage {color: red;}

请记住，元素可以有多个类。乙二醇

<p id="id123" class="class1 class2">

在jquery中，最简单的方法是为每个div分配一个类，比如“statusMessage” 比如：

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

<div id="statusMessage_<%=someid%>" class="statusMessage">...</div>

没有jquery：

var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
   if(divs[i].id.indexOf('statusMessage_')==0){
      //do stuff here for every divs[i]
   }
}

var divs=document.getElementsByTagName（'div'）；
对于（var i=0；i如果您不想使用jQuery，那么还有另一种更简单的方法：
指定一个类——例如将其命名为“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;
}

函数getElementsByClass（搜索类、节点、标记）{
var classElements=新数组（）；
if（node==null）
节点=文档；
if（标记==null）
标记='*'；
var els=node.getElementsByTagName（标记）；
var elsLen=els.长度；
var pattern=newregexp（“（^ |\\s）”+searchClass+”（\\s |$）”；
对于（i=0，j=0；i

以下是您如何称呼它的：
var messages = getElementsByClass("message");

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

var messages=getElementsByClass（“消息”）；
对于（var index=0；index
基于元素id属性的通配符解决方案
是的，这是可能的。这直接回答了您的问题，而不依赖第三方JavaScript或API或元素id以外的属性。此外，您不必使用类=
自定义方法调用示例
// Uses JavaScript regex features to search on id= attribute
var arrMatches = document.getElementsByRegex('^statusMessage_.*');

这将获取一个数组，其中包含id以“statusMessage”开头的所有元素（即使是嵌套的元素）
实施示例-可重用和通用
下面是一个getElementsByRegex
函数的实现，该函数从document
开始，在DOM中搜索给定的正则表达式。为了方便起见，它会根据预期的行为附加到document对象
<head>
<script>
// Called as: document.getElementsByRegex("pattern").
// Returns an array of all elements matching a given regular expression on id.
// 'pattern' argument is a regular expression string.
//
document['getElementsByRegex'] = function(pattern){
   var arrElements = [];   // to accumulate matching elements
   var re = new RegExp(pattern);   // the regex to match with

   function findRecursively(aNode) { // recursive function to traverse DOM
      if (!aNode) 
          return;
      if (aNode.id !== undefined && aNode.id.search(re) != -1)
          arrElements.push(aNode);  // FOUND ONE!
      for (var idx in aNode.childNodes) // search children...
          findRecursively(aNode.childNodes[idx]);
   };

   findRecursively(document); // initiate recursive matching
   return arrElements; // return matching elements
};
</script>
</head>

您可能希望通过在第二个参数中传递标记名来修改通用算法，以便在像这样开始搜索之前进行过滤
$$('div.myDivClass');

<body>

<div id="statusMessage_1">1</div>
<div id="statusMessage_2">2
    <div id="content">other stuff</div>
    <div id="statusMessage_3">3</div>
</div>

<script>
   // a quick test to see if you get the expected result.
   var arrMatches = document.getElementsByRegex('^statusMessage_.*');
   alert('found ' + arrMatches.length + ' matches - expected 3.')
</script>

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

只需将document.getElementById（divs[i].id）.style.display=“none”
替换为您想要应用于所有id以statusMessage开头的div的CSS即可。
只是认为用JavaScript中更新线程的最新方法是值得的，因为搜索中仍然会出现这种方法
document.querySelector("[id^='statusMessage_']");

列出了它可以在IE8的ID上使用，以及在其他浏览器中的强大支持。
2020年更新：
使用jQuery可以做到这一点
$("div[id^='statusMessage_']")

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

**省略单引号
我还经常在末尾添加一个变量：
$("div[id^=statusMessage_" + id + "]")

谢谢你的解决方案。但不幸的是，我没有使用jQuery。但是Prototype是可以的。Prototype中有类似的吗？谢谢！对不起，我不熟悉Prototype。Prototype支持相同的选择器，只需使用$$：为了澄清这一点，要在Prototype中执行OP想要的操作，命令是：$$（$div[id^='statusMessage_']）我认为这个解决方案是没有帮助的。作者似乎没有要求一个jQuery解决方案，而是一个标准的JS解决方案。第一次生成它对我来说是可以的。但是在后续javascript中调用它是一个问题。这是因为AJAX调用将在一段时间后修改div，ID可能已经更改。谢谢你的建议现在，这引发了一个想法。我可以使用一个类名，并使用该类名访问它。谢谢，这正是我在2018年寻找的。谢谢这个答案。如果需要获取多个元素文档，可以使用queryselectoral（）
。