Select div using wildcard ID

Asked 21/12, 2009 at 5:1 Answered 22/4, 2020 at 17:34

Solved javascript jquery dom prototypejs

How to select a div using it's ID but with a widcard?

If the DIV's ID is statusMessage_1098, I would like to select it in some way like document.getElementById('statusMessage_*').

This is because until the page is generated, I don't know the suffix of the ID and only one such ID will be present in a page. Is this possible?

Thanks for any help.

Circumjacent answered 21/12, 2009 at 5:1 Comment(0)

Using jQuery you can do this

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

See attributeStartsWith

Edit - with class name selector

If you can use a class name then you can use something like this

$$('div.myDivClass');

gets all div elements with class 'myDivClass'

Apodaca answered 21/12, 2009 at 5:3 Comment(5)

Thanks for that solution. But unfortunately, I don't use jQuery. But Prototype is OK. Any equivalent of this in Prototype? Thanks! – Circumjacent 21/12, 2009 at 5:5

Sorry, I am not familiar with prototype. – Apodaca 21/12, 2009 at 5:8

Prototype supports the same selector, just use $$: prototypejs.org/api/utility/dollar-dollar – Scourings 21/12, 2009 at 5:12

To clarify this, to do what the OP wanted in Prototype, the command is: $$("div[id^='statusMessage_']") – Jamima 5/5, 2010 at 21:48

I think this solution is unhelpful. The author doesn't seem to ask for a jQuery solution but for a standard JS solution. – Alleviator 12/4, 2018 at 8:30

Just thought it was worth updating the thread with a more recent way of doing this in JavaScript as was still coming up in searches.

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

caniuse.com lists it can be used on IDs from IE8 and great support in other browsers.

Birk answered 21/6, 2017 at 13:13 Comment(2)

Thanks, that's exactly what I was looking for in 2018 – Alleviator 11/4, 2018 at 12:4

Thanks for this answer. If one needs to get multiple elements document.querySelectorAll() can be used. – Etom 8/11, 2018 at 18:11

Wildcard Solution based on element id attribute

Yes it is possible. This answers your question directly without relying on third-party JavaScript or APIs or attributes other than the id of the element. Also you don't have to use class=

Custom Method Call Example

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

This gets an array containing all elements having an id starting with "statusMessage_" (even nested ones).

Implementation Example - reusable and generic

Here's an implementation for the getElementsByRegex function that searches the DOM for the given regex, starting from document. It's attached to the document object for convenience and according to expected behaviour.

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

There are likely more efficient implementations but this one provides a start. The body of the function can be replaced with other algorithms according to taste.

Test the Code

Finally, test it using an HTML blurb having nested elements like this

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

This HTML block contains three elements starting with id="statusMessage_; therefore the alert test will say

"found 3 matches - expected 3"

Addendum Info for Variations

If you want to restrict the search to only div elements or some other kind of specific element then you will want to inject the following getElementByTagName code into the algorithm to restrict the set of elements searched against.

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

You might want to modify the generic algorithm by passing the tag name in a second argument to filter on before searching commences like this

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

Idalia answered 21/12, 2009 at 6:7 Comment(0)

Using jQuery you can do this

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

See attributeStartsWith

Edit - with class name selector

If you can use a class name then you can use something like this

$$('div.myDivClass');

gets all div elements with class 'myDivClass'

Apodaca answered 21/12, 2009 at 5:3 Comment(5)

Thanks for that solution. But unfortunately, I don't use jQuery. But Prototype is OK. Any equivalent of this in Prototype? Thanks! – Circumjacent 21/12, 2009 at 5:5

Sorry, I am not familiar with prototype. – Apodaca 21/12, 2009 at 5:8

Prototype supports the same selector, just use $$: prototypejs.org/api/utility/dollar-dollar – Scourings 21/12, 2009 at 5:12

To clarify this, to do what the OP wanted in Prototype, the command is: $$("div[id^='statusMessage_']") – Jamima 5/5, 2010 at 21:48

I think this solution is unhelpful. The author doesn't seem to ask for a jQuery solution but for a standard JS solution. – Alleviator 12/4, 2018 at 8:30

In jquery, the easiest way is to assign a class for every div let say 'statusMessage' something like:

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

To get them all:

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

Without 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]
   }
}

Glasswork answered 21/12, 2009 at 5:9 Comment(1)

Thanks for your suggestion. Now that sparked an idea. I can use a classname for it and access it using that classname. – Circumjacent 21/12, 2009 at 5:24

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

Just replace document.getElementById (divs[i].id).style.display = "none"; with whatever CSS you want to apply to all divs that have an id that starts with statusMessage_.

Typhoid answered 20/9, 2011 at 15:46 Comment(0)

Update for 2020:

Using jQuery you can do this

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

**Omit the single quotes.

I also often add a variable to the end:

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

Flexure answered 22/4, 2020 at 17:34 Comment(0)

I'm not sure how you're populating it but if it's from the code behind you could try something like:

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

where generatedID is the ID generated from the code behind.

Lotic answered 21/12, 2009 at 5:7 Comment(1)

Generating it the first time is OK for me. But calling it in subsequent javascript is what comes as a problem. That's because the AJAX calls will modify the div after some time and the ID may have changed. – Circumjacent 21/12, 2009 at 5:10

Usual way to do this within css is to give the elements a class 'statusMessage' in addition to their unique ids. Then you can create a css rule with a selector that will affect all elements with that class. Eg

 .statusMessage {color: red;}

Remember that elements can have more than one class. Eg

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

Outfight answered 21/12, 2009 at 5:7 Comment(0)

If you don't want to use jQuery then there is another easier way to do this:

Assign a class - for an example name it "message", and use the following:

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

Here how you call it:

var messages = getElementsByClass("message");

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

Raddie answered 21/12, 2009 at 5:40 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Wildcard Solution based on element id attribute

Recommended topics

Hot tags