Trying to find name of a div generated by CMS

hey_hudson

06-03-2009, 11:40 AM

Hello all, hope everyone is well. I'm a bit of a JS novice, so I'm hoping someone can help with this...

The site I'm working on uses a CMS (which I have no access to, nor control over the output), and in one section of the site, it outputs divs like this (I've changed the actual ID names for clarity's sake)...

<div id="generated-div-1">
<p>Blah</p>
</div>

<div id="generated-div-2">
<p>Blah</p>
</div>

<div id="generated-div-3">
<p>Blah</p>
</div>

etc ad infinitum

Now then, I need to be able to check if a div is called 'generated-div-[number]', and I thought the best way to go about this would be to use regex. However, most of my regex experience comes from doing PHP work, and as I said, I'm a bit of a JS novice.

So far, I've got this...

function checkDiv() {
var divName = /(^generated-div-)+[0-9]{1}$|[1-9]{1}[0-9]{1}$|(100)$/;
if (document.getElementById.match(var divName)) {
document.getElementById(var divName).style.backgroundColor='#cc0000';
}
}

That's a slightly simpler version of what I want it to do (i.e: in the end, I don't want to merely change the BG colour), but I mainly need some help with the regex and 'if' part of things.

Is that waaaaay off the mark? Any help would be appreciated. :thumbsup:

Ta

coothead

06-03-2009, 12:08 PM

Hi there hey_hudson,

does this help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css"></style>

<script type="text/javascript">

function checkDiv(){

num=2;
dvs=document.getElementsByTagName('div');

for(c=0;c<dvs.length;c++) {
if(dvs[c].id=='generated-div-'+num) {
dvs[c].style.backgroundColor='#c00';
}
}
}
if(window.addEventListener){
window.addEventListener('load',checkDiv,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',checkDiv);
}
}
</script>

</head>
<body>

<div id="generated-div-1">
<p>Blah</p>
</div>

<div id="generated-div-2">
<p>Blah</p>
</div>

<div id="generated-div-3">
<p>Blah</p>
</div>

</body>
</html>

coothead

hey_hudson

06-03-2009, 12:53 PM

Cheers for that, Coothead, but it wasn't quite what I was after (perhaps I wasn't clear enough in my original post).

I'm looking to target ANY div that is called 'generated-div-[number]', not just a specific one.

I've almost got it I think...

// Create the regex pattern to test
var rxPattern_generatedDiv=new RegExp(/(^generated-div-)+[0-9]{1}$|[1-9]{1}[0-9]{1}$|(100)$/);

// Test it against the element
if (rxPattern_generatedDiv.test('generated-div-100') == true) {
document.write('Correct!');
}
else {
document.write('Incorrect!');
}

This works, however, what I need to be able to do is test it against any div ID on the page (i.e: dynamically instead of having to insert 'generated-div-100' after the .test).

I've tried doing something like this and it doesn't work...

// Create the regex pattern to test
var rxPattern_generatedDiv=new RegExp(/(^generated-div-)+[0-9]{1}$|[1-9]{1}[0-9]{1}$|(100)$/);
// Create the var to test against
var testAgainst = document.getElementById;
// Test it against the element
if (rxPattern_generatedDiv.test(var testAgainst) == true) {
document.write('Correct!');
}
else {
document.write('Incorrect!');
}

coothead

06-03-2009, 03:11 PM

Hi there hey_hudson,
I'm looking to target ANY div that is called 'generated-div-[number]', not just a specific one.
That is what my example will do. ;)
I just used the number 2 so that you would see the principle.
If you are not convinced, try this....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css"></style>

<script type="text/javascript">
function init() {

df=document.forms[0];

df[1].onclick=function() {
if(isNaN(df[0].value)||(df[0].value=='')){
alert('please enter any number');
return;
}
else {
checkDiv(df[0].value);
}
}
}

function checkDiv(num){
test=false;
dvs=document.getElementsByTagName('div');

for(c=0;c<dvs.length;c++) {
if(dvs[c].id=='generated-div-'+num) {
dvs[c].style.backgroundColor='#c00';
test=true;
}
}
if(test==false) {
alert('generated-div-'+num+' does not exist');
}
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div id="generated-div-1"><p>Blah</p></div>
<div id="generated-div-2"><p>Blah</p></div>
<div id="generated-div-3"><p>Blah</p></div>
<div id="generated-div-4"><p>Blah</p></div>
<div id="generated-div-5"><p>Blah</p></div>
<div id="generated-div-6"><p>Blah</p></div>

<form action="#">
<div>
<label for="number">enter any number : </label><input id="number" type="text">
<input type="button" value="find div">
</div>
</form>

</body>
</html>

coothead

adios

06-03-2009, 03:43 PM

Not entirely clear what the rules of that naming convention are.

Will the elements be consecutively id'd "something_1" , "something_2" , etc?

var el, n = 1;
while (el = document.getElementById('something_' + n++))
{
.... do something with el ...