开发者

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');
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜