jquery add item to UL then sort, then highlight item that was added

Question

this is my current code

 $('ul#attachmentlist>li').last().after("<li>new item on list</li>");
 $('ul#attachmentlist>li').last().effect("highlight", {}, 2000);

what i want is to have the newly inserted li element get highlighted after it is sorted

 $('ul#attachmentlist>li').last().after("new item on list");
 $("ul#attachmentlist>li").tsort(); // tinysort plugin
 $('ul#attachmentlist>li').last().effect("highlight", {}, 2000);

i have sorting working, how do i get a reference to the newly inserted item, so that when i call the highlight effect, it highlights the newly inserted element, not the last one on the list ?

thanks

Answer 1

What if you created the object before inserting it? Then you'd have the correct reference to highlight:

var newListItem = $("<li>new item on list</li>");
$('ul#attachmentlist>li').last().after(newListItem);
$("ul#attachmentlist>li").tsort(); // tinysort plugin
newListItem.effect("highlight", {}, 2000);

Answer 2

You could give the added Li a class, then remove it after you highlight it. like so:

 $('ul#attachmentlist>li').last().after("<li class='NewThing'>new item on list</li>");
 $("ul#attachmentlist>li").tsort(); // tinysort plugin
 $('ul#attachmentlist>li').find('.NewThing').effect("highlight", {}, 2000).removeClass('NewThing');

Answer 3

You can kick off the effect animation before the sort keeping it still pretty simple, like this:

$("<li>new item on list</li>").appendTo('ul#attachmentlist')
                              .effect("highlight", {}, 2000);
$('ul#attachmentlist>li').tsort();

This uses the $(html) method of creating the element, and just appending it to the parent (thereby making it the last item) and starting an animation at the same time. Then we do a sort...but the animation will continue to work, even after the elements are sorted.