Given the following:
$("#taglist").append('<li><a href="">' + v + '</a></li>').hide().fadeIn();
Why does it fadeIn the entire taglist LI list, and not juse the new item that was appended which is what I want to happen?
Thanks
Given the following:
$("#taglist").append('<li><a href="">' + v + '</a></li>').hide().fadeIn();
Why does it fadeIn the entire taglist LI list, and not juse the new item that was appended which is what I want to happen?
Thanks
.fadeIn() applying to the #taglist? Try splitting it into two, and adding a class to the new li, then doing
$('li.new_class_name').fadeIn();
Or you may also be able to do
$('#taglist li:last').fadeIn();
Whatever you prefer. Of course I'm assuming in the first example you have logic iterating/creating the new li, where you can append a number to the new class to identify it for the fadeIn. The second example is more practical after you complete the append.
The beauty of jQuery as you can see from all the answers is there are many ways to approach this.
Your jQuery selector is targeting the UL and not the li. Try:
$('<li><a href="">' + v + '</a></li>').appendTo("#taglist").hide().fadeIn();
Because as most methods in jquery, it returns the initial object to allow chaining of commands..
Use the appendTo
if you have to do it in one line..
Like most other jQuery functions, append
returns the original element(s) that it was called on.
Therefore, you're fading the entire <ul>
.
You're looking for appendTo
:
$('<li><a href="">' + v + '</a></li>').hide().appendTo("#taglist").fadeIn();
Also, you have an HTML injection vulnerability through the v
variable.
This ended up working nicely.
$("#taglist").append('<li><a href="">' + v + '</a></li>');
$('#taglist').children(':last').hide().fadeIn();