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.
Using jQuery you can do this
$("div[id^='statusMessage_']")
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'
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.
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">
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]
}
}
function wildcard(){
// get all divs
var divs = document.getElementsByTagName("div");
// iterate over them
for ( var i = 0; divs[i]; i++ ) {
if ( divs[i].nodeType === 1 ) {
// id start with 'statusMessage_' ?
if (divs[i].id.indexOf("statusMessage_") == 0)
{
return divs[i];
}
}
}
}
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);
}
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');