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

Code:

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

Code:

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.

Ta

coothead · 06-03-2009, 12:08 PM

Hi there hey_hudson,

does this help...

Code:


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

Code:

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

Code:

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

Quote:

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

Code:


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

Code:

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