jQuery fadeIn() following after()

Question

I was looking to do a .fadeIn() animation chained to this .after(), but this doesn't appear to be the way of doing it. Any suggestions?

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

Answer 1

You should use .insertAfter();

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

Answer 2

In addition to @EmreErkan's answer, try minimizing your code. Use parents() and select the id or class of the div you wish to add the text after instead of using parent() three times:

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

EDIT: As pointed out in the comments, it is better to use closest() instead of parents() if you are targeting a single element, which using parents() with a selector usually implies.

Answer 3

$.fn.after() will return the element it was run on (in this case $(clicked_item).parent().parent().parent()). If that is the element you want to fadeIn then I see no problem. If you want to fadeIn() the 'str' element instead I'd suggest doing this:

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

A more stable way of getting a specific parent of an element that doesn't require you to change the number of .parent() calls if you change the HTML is to use .parents() together with a tag name:

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

Change the 'p' to the element you want to reach.

Edit: woops, too late.