jquery - JQUERY フェードイン - 追加されている LI ではなく、UL 全体を点滅させるのはなぜですか?

Question

以下を考えると：

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

taglist LI リスト全体でフェードインし、追加された新しいアイテムを使用しないのはなぜですか?

ありがとう

score 3 · Accepted Answer

他のほとんどのjQuery関数と同様appendに、呼び出された元の要素を返します。
したがって、全体がフェードしています<ul>。

あなたが探しているappendTo：

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

また、v変数を介したHTMLインジェクションの脆弱性があります。

score 1 · Accepted Answer

.fadeIn（）を#taglistに適用しますか？それを2つに分割し、新しいliにクラスを追加してから、

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

またはあなたもできるかもしれません

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

あなたが好むものは何でも。もちろん、最初の例では、新しいliを反復/作成するロジックがあり、新しいクラスに番号を追加して、fadeIn用に識別することができると想定しています。2番目の例は、追加を完了した後の方が実用的です。

すべての答えからわかるように、jQueryの美しさは、これにアプローチする方法がたくさんあることです。

score 0 · Accepted Answer

jQueryセレクターは、liではなくULをターゲットにしています。試す：

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

score 0 · Accepted Answer

jqueryのほとんどのメソッドと同様に、コマンドのチェーンを許可するために初期オブジェクトを返すためです。

appendTo1行で実行する必要がある場合はを使用します。

score 0 · Accepted Answer

これはうまく機能することになりました。

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

5 に答える 5