why does this work? Jquery, nextAll()

http://pastebin.com/x8ruGQFK

As you see, this is a very basic step by step "form".

This works perfectly, but why?

At the beginning i have 3 divs. then i set them hidden. then i set the first one on show.

then i click on next.

1. var currentForm = $(".my-form-page:visible"); i get the fir开发者_如何学运维st div, which is visible.
2. currentForm.hide(); i hide it. yep, that's right. so again, everything is hidden.
3. currentForm.nextAll(".my-form-page:first").show(); nextAll, would apply some css to all elements after it but since i have the pseudoclass :first, it wont. just on the first.

But since first applies just to visible elements, it shouldn't work. Why does this thing know, that the 2nd element, which is also hidden, is now the first? Why can i access it like that?

---

:first doesn't apply only to visible elements. It is the equivalent of :eq(0). If you want it to apply only to visible elements you need to include the :visible selector again:

currentForm.nextAll(".my-form-page:visible:first").show();