Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to find name of a div generated by CMS

    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

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    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

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!');
    		}

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    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....
    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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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 ...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •