JQUERY fadeIn - Почему мигает весь UL, а не LI, который добавляется?

Question

Учитывая следующее:

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

Почему он исчезает во всем списке тегов LI, а не использует новый элемент, который был добавлен, что я хочу, чтобы произошло?

Спасибо

Answer 1

Как и большинство других функций jQuery, append возвращает исходные элементы, к которым он был вызван.
Таким образом, вы исчезаете весь <ul>.

Вы ищете appendTo:

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

Кроме того, у вас есть уязвимость внедрения HTML через переменную v.

Answer 2

.fadeIn () применяется к #taglist? Попробуйте разделить его на две части и добавить класс в новый li, затем выполните

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

Или вы также можете сделать

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

Все, что вы предпочитаете. Конечно, я предполагаю, что в первом примере у вас есть логическая итерация / создание нового li, где вы можете добавить число в новый класс, чтобы идентифицировать его для fadeIn. Второй пример более практичен после завершения добавления.

Красота jQuery, как вы можете видеть из всех ответов, заключается в том, что к этому есть множество способов.

Answer 3

В итоге все заработало.

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

Answer 4

Потому что, как и большинство методов в jquery, он возвращает исходный объект, чтобы разрешить цепочку команд ..

Используйте appendTo, если вам нужно сделать это в одну строку.

Answer 5

Ваш селектор jQuery нацелен на UL, а не на li. Попробуйте:

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