Jquery nth-child fadeIn

I have problem with javascript and HTML. I want to pop out a message if value of text input is wrong.

    $('input[name="login"]').blur(function() {
    $('.error:nth-child(2)').fadeIn('fast', function() {

    });
});

and HTML/PHP code:

    echo "<div class=\"grid_2 alpha\">Nazwa użytkownika</div><div class=\"grid_2 omega register\"&g开发者_高级运维t;".form_input('login', set_value('login', ''))."</div>";
    echo "<div class=\"error grid_4\">Niepoprawna nazwa użytkownika.</div>";

What I cannot achieve is to actually fadeIn this little div. Nothing happens. What can be wrong with this code?

Everything works when I'm not using :nth-child().

It's hard to be sure without seeing more code, but I have a feeling what you're after is something like:

$(".error").eq(2).fadeIn("fast", function() {
    //Done!
});

eq will only match elements of the specified selector, whereas nth-child will look at all siblings. Therefore, the above code will select the 2nd element matching .error. You can also use the :eq pseudo-selector if you prefer:

$(".error:eq(2)").fadeIn("fast", function() {});

The difference between eq and nth-child is a common source of confusion. The jQuery docs help clear it up:

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

Of course, I may be completely wrong and when you post more code I may well have to delete this answer!