Hi there, I was wondering if anybody can help me understanding this code please - well it's more about the usage of :first really):
<!DOCTYPE html>
<html>
<head>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
</script>
</body>
</html>
Now, the purpose of this code - taken from http://api.jquery.com/fadeIn/ - is to reveal a square each time you click on the link. What I am not clear about is how the selector works: $("div:hidden:first"). this selects every first hidden div, but the :first filter selects only one element, so I assume it will select always the first div because it is the first one! That said if I remove it to obtain $("div:hidden") then the 3 divs appear at the same time when you click the link. SO my question is, how does the :first filter manage to select only one div each time the link is selected?
thanks
