How to hide random named div's?

Discussion in 'JavaScript' started by 123GoToAndPlay, Nov 6, 2007.

  1. #1
    Hi all,

    I would like to hide random named div's?

    With prototype.js i can hide various div with
    
    ['content', 'navigation', 'footer'].each(Element.hide);
    
    Code (markup):
    but in my case the div's have random id's,
    
    ['div-131324', 'div-s23132a', 'div-asdf12'].each(Element.hide);
    
    Code (markup):
    Anyway info. how to do this? Regexp in js perhaps?
     
    123GoToAndPlay, Nov 6, 2007 IP
  2. cjburkha

    cjburkha Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can do this if you know two things:

    1. That we are talking about only divs (or any X element)
    2. There is some prefix or suffix to the div id, like 'div-23409'

    psudo-code:

    //Gets all the divs in the page
    var allDivs = document.getElementsByTagName('div');

    var count = 0;
    for (var i in allDivs) {
    if (allDivs.id.indexOf('div') != 0) {
    count++;
    //every 5th
    if (mod(count, 5) == 0)
    allDivs.style.display = 'none';
    }
    }
    }

    That code will hide every 5th div that id starts with 'div'

    Please, its psudo-code, not tested. Give a test case and I can give working code.
     
    cjburkha, Nov 6, 2007 IP
  3. 123GoToAndPlay

    123GoToAndPlay Peon

    Messages:
    669
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    @cjburkha, thank you for answering

    I see what you are doing and i am trying to get it into my code.

    This is for example part of my code

    
    <tr>
      <td nowrap="nowrap"><div style="float:left; padding-right: 5px;"> 
      here some edit options </div></td>
    </tr>
    <tr>
      <td colspan="2"><div id="route-140507oLm9OUj" style="background-color:#CCCCCC; padding: 10px; display: none;"><img alt="Spinner" id="load_spinner" src="/imgs/spinner.gif" style="display:none;" /></div></td>
    </tr>
    <tr>
      <td nowrap="nowrap"><div style="float:left; padding-right: 5px;"> 
      here some edit options </div></td>
    </tr>
    <tr>
      <td colspan="2"><div id="route-140607olEum5U" style="background-color:#CCCCCC; padding: 10px; display: none;"><img alt="Spinner" id="load_spinner" src="/imgs/spinner.gif" style="display:none;" /></div></td>
    </tr>
    etc.
    
    Code (markup):
    and with your suggestion i tried
    
    	var selectedDiv = "route-140507oLm9OUj";//testing
    	var allDivs = document.getElementsByTagName('div');
    	var count = 0;
    	for (var i in allDivs) {	
    		if (allDivs.id.indexOf('route-') != 0) 
    		{
    			count++;
    			//if selectedDiv show
    			if (allDivs[count] == selectedDiv){
    				allDivs[count].show();
    				//alert(allDivs[count]);
    			} else {
    				allDivs[count].hide();
    			}
    		}
    	}
    
    Code (markup):
    But i get the error
    Any ideas?
     
    123GoToAndPlay, Nov 7, 2007 IP
  4. cjburkha

    cjburkha Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yes,

    In your code "><div style="float:left; padding-right: 5px;">
    here some edit options </div>

    You divs do not have and id.

    What is your criteria to hide a div?
     
    cjburkha, Nov 7, 2007 IP