SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Question concerning :hidden attribute

    I've built an example below which should demonstrate my question:
    Code:
    <html>
    <head>
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    .hidden{
    display:none;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div style="display:block" class="hidden">
    test
    </div>
    </div>
    <script type="text/javascript">
    var contentStr = $('<div></div>')
    $(contentStr).append($("#container").html());
    alert(contentStr.html());
    $(".hidden",contentStr).each(function(index){
    	if($(this).is(":hidden")){
    		alert("Hidden");
    	}else{
    		alert("Visible");
    	}
    });
    </script>
    </body>
    </html>
    Why is it that :hidden returns a value of hidden when the above value is visible. If I then remove the contentStr and grab it straight from the dom :hidden returns visible (as I would expect).

    Does this happen because contentStr has not yet been added to the dom? If so, how can I check the visibility of the .hidden div correctly within contentStr.

    Thanks for the help.
    Follow Me On Twitter: BryceRay

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You won't be able to check the display status of an element unless the context exists in the DOM first, the code you posted above doesn't show the element been added so there for jQuery can't determine whether the .hidden element is :visible or :hidden.


Bookmarks

Posting Permissions

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