jquery - JQUERY fadeIn - 为什么它闪烁整个 UL，而不是正在附加的 LI？

Question

鉴于以下情况：

$("#taglist").append('<li><a href="">' + v + '</a></li>').hide().fadeIn();

为什么它会在整个 taglist LI 列表中淡入淡出，而不是仅仅添加我想要发生的新项目？

谢谢

Answer 1

像大多数其他 jQuery 函数一样，append返回调用它的原始元素。
因此，您正在淡化整个<ul>.

您正在寻找appendTo：

$('<li><a href="">' + v + '</a></li>').hide().appendTo("#taglist").fadeIn();

v此外，您还有一个通过变量的 HTML 注入漏洞。

Answer 2

.fadeIn() 应用于#taglist？尝试将其一分为二，并在新的 li 中添加一个类，然后执行

$('li.new_class_name').fadeIn();

或者你也可以做

$('#taglist li:last').fadeIn();

无论你喜欢什么。当然，我假设在第一个示例中您有逻辑迭代/创建新的 li，您可以在其中将一个数字附加到新类以识别它以用于淡入淡出。完成追加后，第二个示例更实用。

从所有答案中可以看出，jQuery 的美妙之处在于有很多方法可以解决这个问题。

Answer 3

您的 jQuery 选择器的目标是 UL 而不是 li。尝试：

$('<li><a href="">' + v + '</a></li>').appendTo("#taglist").hide().fadeIn();

Answer 4

因为与 jquery 中的大多数方法一样，它返回初始对象以允许链接命令..

appendTo如果必须在一行中完成，请使用..

Answer 5

这最终工作得很好。

                $("#taglist").append('<li><a href="">' + v + '</a></li>');
                $('#taglist').children(':last').hide().fadeIn();