0

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

3
Contributors
4
Replies
16
Views
4 Years
Discussion Span
Last Post by Violet_82
0

You selector is div:hidden:first and they work in that order. div will list all divs in your DOM. :hidden will filter that list so it only contains hidden divs. Lastly :first will return the first of those, so the first hidden div it encounters.

Edited by pritaeas

0

ahhhh ok I understand now, so it select the first hidden one! thanks for clarifying that! sorry I think I still have troubles getting this idea of multi filtering in my head. I interpreted that as selecting the hidden divs and then the first one, whether it was hiddin or not

0

IIM, I looked at all those already tahnks : - ) it's just that I mis interpreted it
thanks

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.