jQuery Question concerning :hidden attribute

JavaScript
1

I’ve built an example below which should demonstrate my question:


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

2

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.