Question

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

如果DIV的ID为statusMessage_1098，我想以document.getElementById('statusMessage_*')之类的方式选择它。

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

感谢您的帮助。

Answer 1

基于元素id属性

的通配符解决方案

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

自定义方法调用示例

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

这将获得一个数组，其中包含id为“statusMessage_”的所有元素（即使是嵌套的元素）。

实施示例 - 可重复使用和通用

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

<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>

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

测试代码

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

<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>

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

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

变体附录信息

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

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

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

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

Answer 2

使用jQuery可以做到这一点

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

参见 attributeStartsWith

编辑 - 使用班级名称选择

如果您可以使用类名，那么您可以使用类似

的内容

$$('div.myDivClass');

获取所有div元素的类'myDivClass'

Answer 3

我认为值得更新线程的最新方式是在JavaScript中执行此操作，因为搜索中仍会出现这种情况。

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

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

Answer 4

在jquery中，最简单的方法是为每个div分配一个类，让我们说'statusMessage' 类似的东西：

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

全部搞定：

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

没有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]
   }
}

Answer 5

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";替换为要应用于ID为 statusMessage _ 的所有div的任何CSS。

Answer 6

2020年更新：

使用jQuery，您可以做到

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

**省略单引号。

我也经常在最后添加一个变量：

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

Answer 7

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

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

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

Answer 8

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

 .statusMessage {color: red;}

请记住，元素可以包含多个类。例如

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

Answer 9

如果您不想使用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);
}

使用通配符ID选择div

9 个答案:

基于元素id属性