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
    39
    Thanks
    14
    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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,083
    Thanks
    23
    Thanked 592 Times in 591 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.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    pstein (07-06-2014)

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,224
    Thanks
    10
    Thanked 269 Times in 268 Posts
    The css solution would be:
    Code:
    .aaa+div {display:none}

  • Users who have thanked tracknut for this post:

    pstein (06-24-2014)

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 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>

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

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