jquery add item to UL then sort, then highlight item that was added
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
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.
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);
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');
精彩评论