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 Coder
    Join Date
    Dec 2011
    Posts
    89
    Thanks
    22
    Thanked 0 Times in 0 Posts

    How to address <div>directly after <div class="aaa"> ?

    Assume I have a code like:

    ....
    <div class="aaa">
    ....
    </div>
    <div>
    ....
    </div>
    ....

    Now I want to hide from Javascript or CSS the whole <div> element which follows directly AFTER the <div class="aaa"> element.
    Unfortuantely it has no id nor class name. So I must adress it relative to the precedent <div ....> element.

    The first div element hide could be easily hidden by:

    div.aaa { display: none; }

    ... but the second?

    Be aware then all remaining <div> elements should be kept.

    How can I achieve this?

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,474
    Thanks
    31
    Thanked 1,008 Times in 1,005 Posts
    You can find a list of selectors here: jQuery Selectors
    You can test selectors here: Try jQuery Selector

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    div{
    	height: 20px;
    	width: 20px;
    	background-color: blue;
    	margin: 10px;
    }
    </style>
    </head>
    
    <body>
    <div id="aaa"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    	$("div:nth-child(2)").css("height", "100px");
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    pstein (07-06-2014)

  4. #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,872
    Thanks
    12
    Thanked 401 Times in 398 Posts
    The css solution would be:
    Code:
    .aaa+div {display:none}

  5. Users who have thanked tracknut for this post:

    pstein (06-24-2014)

  6. #4
    Senior Coder
    Join Date
    Aug 2010
    Posts
    1,248
    Thanks
    44
    Thanked 275 Times in 273 Posts
    Quote Originally Posted by pstein View Post
    Assume I have a code like:

    ....
    <div class="aaa">
    ....
    </div>
    <div>
    ....
    </div>
    ....

    Now I want to hide from Javascript or CSS the whole <div> element which follows directly AFTER the <div class="aaa"> element.
    Unfortuantely it has no id nor class name. So I must adress it relative to the precedent <div ....> element.

    The first div element hide could be easily hidden by:

    div.aaa { display: none; }

    ... but the second?

    Be aware then all remaining <div> elements should be kept.

    How can I achieve this?
    You can use the node collection
    to access divs relative to their
    parent element like this ...
    Code:
    <!DOCTYPE html>
    <html>
    <body> 
    
     <div class="aaa">
     ....div class="aaa"
     </div>
     <div>
     &lt;div> element which follows directly AFTER the &lt;div class="aaa"> 
    will disapear soon
     </div>
    <div>
    another div
     </div>
    <script>
    var count=4;
    (function countdown(){
    if(count-- > 0)setTimeout(countdown,1000);
    else{
     var a = document.getElementsByClassName("aaa")[0].parentNode.childNodes;
     var elDiv=[]
     for(var i = 0; i<a.length; i++){
      if( a[i].nodeName.toLowerCase() == "div")
       elDiv.push(a[i]) 
     }
     elDiv[1].style.display="none";
    }
    })()
    </script>
    </body>
    </html>

  7. #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,079
    Thanks
    0
    Thanked 257 Times in 253 Posts
    Go by tracknut's css solution using adjacent sibling selector. No need to use javascript for this.

  8. Users who have thanked glenngv for this post:

    pstein (07-06-2014)


 

Posting Permissions

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