使用通配符 ID 选择 div

Question

如何使用它的 ID 但使用通配符选择一个 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 简介来测试它

<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

只是认为值得在 JavaScript 中使用更新的方式更新线程，因为仍在搜索中出现。

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

caniuse.com列出了它可以用于 IE8 的 ID，并在其他浏览器中提供强大的支持。

Answer 3

使用 jQuery 你可以做到这一点

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

查看属性StartsWith

编辑 - 使用类名选择器

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

$$('div.myDivClass');

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

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

2020 年更新：

使用 jQuery 你可以做到这一点

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

**省略单引号。

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

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

Answer 6

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 7

我不确定你是如何填充它的，但如果它来自背后的代码，你可以尝试以下方法：

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

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

Answer 8

在 css 中执行此操作的通常方法是为元素提供一个类“statusMessage”以及它们的唯一 id。 然后，您可以创建一个带有选择器的 css 规则，该规则将影响具有该类的所有元素。 例如

 .statusMessage {color: red;}

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

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

Answer 9

如果您不想使用 jQuery，那么还有另一种更简单的方法来做到这一点：

分配一个class - 例如将其命名为“消息”，并使用以下内容：

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 个解决方案

解决方案1
22 2009-12-21 06:07:29

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

解决方案2
22 2017-06-21 13:13:17

解决方案3
14 已采纳 2009-12-21 05:03:25

解决方案4
2 2009-12-21 05:09:05

解决方案5
1 2020-04-22 17:34:18

解决方案6
1 2011-09-20 15:46:03

解决方案7
0 2009-12-21 05:07:06

解决方案8
0 2009-12-21 05:07:36

解决方案9
0 2009-12-21 05:40:35

使用通配符 ID 选择 div

问题描述

9 个解决方案

解决方案1 22 2009-12-21 06:07:29

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

解决方案2 22 2017-06-21 13:13:17

解决方案3 14 已采纳 2009-12-21 05:03:25

解决方案4 2 2009-12-21 05:09:05

解决方案5 1 2020-04-22 17:34:18

解决方案6 1 2011-09-20 15:46:03

解决方案7 0 2009-12-21 05:07:06

解决方案8 0 2009-12-21 05:07:36

解决方案9 0 2009-12-21 05:40:35

解决方案1
22 2009-12-21 06:07:29

解决方案2
22 2017-06-21 13:13:17

解决方案3
14 已采纳 2009-12-21 05:03:25

解决方案4
2 2009-12-21 05:09:05

解决方案5
1 2020-04-22 17:34:18

解决方案6
1 2011-09-20 15:46:03

解决方案7
0 2009-12-21 05:07:06

解决方案8
0 2009-12-21 05:07:36

解决方案9
0 2009-12-21 05:40:35