Jquery nth-child 淡入

发布于 2024-12-09 03:10:36 字数 604 浏览 1 评论 0原文

我在使用 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() 时，一切正常。

原文

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\">".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().

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅此而已 2024-12-16 03:10:36

如果没有看到更多代码，很难确定，但我有一种感觉，您所追求的是这样的：

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

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

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

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

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

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

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!

回复收藏 0 原文

~没有更多了~