JQUERY fadeIn - Why is it flashing the entire UL, and not the LI that is being appened?

Question

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

Answer 1

.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.

Answer 2

Your jQuery selector is targeting the UL and not the li. Try:

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

Answer 3

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..

Answer 4

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.

Answer 5

This ended up working nicely.

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