javascript - after()に続くjQueryのfadeIn()

Question

.fadeIn()これにチェーンされたアニメーションを実行しようとしていました.after()が、これはそれを行う方法ではないようです。助言がありますか？

$(clicked_item).parent().parent().parent().after(str).fadeIn("slow");

Answer 1

使用する必要があります.insertAfter()。

$(str)
  .hide()
  .insertAfter($(clicked_item).parent().parent().parent())
  .fadeIn("slow");

Answer 2

@EmreErkan の回答に加えて、コードを最小化してみてください。3 回使用する代わりに、テキストを追加する divのまたはを使用parents()して選択します。idclassparent()

$(str)
    .hide()
    .insertAfter($(clicked_item).parents(selector))
    .fadeIn("slow");

編集:コメントで指摘されているように、単一の要素をターゲットにしている場合は、closest()代わりに使用することをお勧めします。これは通常、セレクターで使用することを意味します。parents()parents()

Answer 3

$.fn.after() は、それが実行された要素を返します (この場合は $(clicked_item).parent().parent().parent())。それがフェードインしたい要素であれば、問題はありません。代わりに「str」要素を fadeIn() したい場合は、次のようにすることをお勧めします。

$(str).insertAfter($(clicked_item).parent().parent().parent()).fadeIn('slow');

HTML を変更する場合に .parent() 呼び出しの数を変更する必要がない、要素の特定の親を取得するより安定した方法は、タグ名と一緒に .parents() を使用することです。

$(clicked_item).parents('p').eq(0)

「p」を到達したい要素に変更します。

編集：おっと、遅すぎます。