Jquery nth-child 淡入

Question

我对 javascript 和 HTML 有疑问。如果文本输入的值错误，我想弹出一条消息。

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

    });
});

和 HTML/PHP 代码：

    echo "<div class=\"grid_2 alpha\">Nazwa użytkownika</div><div class=\"grid_2 omega register\">".form_input('login', set_value('login', ''))."</div>";
    echo "<div class=\"error grid_4\">Niepoprawna nazwa użytkownika.</div>";

我无法实现的是在这个小 div 中实际淡入淡出。什么都没发生。 这段代码有什么问题？

当我不使用 :nth-child() 时一切正常。

Answer 1

如果不看更多代码，很难确定，但我感觉你所追求的是这样的：

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

eq 将只匹配指定选择器的元素，而nth-child 将查看所有同级元素。因此，上面的代码将选择匹配.error 的第二个元素。如果您愿意，也可以使用 :eq 伪选择器：

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

eq 和 nth-child 之间的区别是常见的混淆来源。 jQuery docs 帮助清除它：

:nth-child(n) 伪类很容易与 :eq(n) 混淆，甚至 尽管两者可能会导致完全不同的匹配元素。 使用 :nth-child(n)，所有孩子都被计算在内，不管他们是什么 是，并且仅当指定的元素与 附加到伪类的选择器。使用 :eq(n) 仅选择器 附在伪类上也算，不限于子级 任何其他元素，并选择第 (n+1) 个（n 从 0 开始）。

当然，我可能完全错了，当你发布更多代码时，我很可能不得不删除这个答案！