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>
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; }
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <span>Click here...</span>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
$(document.body).click(function () {


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?

Recommended Answers

All 4 Replies

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.

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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.