我有一个UL,我正在努力动态地添加一个新的LI到UL的顶部与一些动画。
到目前为止,我有以下功能可以:
$("#container").prepend('<li id="newhere"><input type="checkBox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");
#container是UL
上述的问题是隐藏了整个UL,然后将整个UL滑下来,我只想要添加前一个动画的NEW LI。
想法? thxs
解决方法
您可以使用
.prependTo()
和
$(html)
轻松地完成所需的操作,如下所示:
$('<li id="newhere"><input type="checkBox" /><span class="listTitle">Im new here</span><ul></ul></li>') .hide().prependTo('#container').slideDown("slow");
You can see a demo of the above code here
.prepend()
返回您添加的元素,而不是前面添加的元素。将其切换到.prependTo()
使其更清洁,并应该具有您想要的效果,因为您可以继续链接您预先添加的元素。此外,如果您使用相同的字符串多次,这将缓存文档片段并使其更快速度:)
最后一件事情是,如果您多次执行此操作,请确保< li>上的ID是唯一的,或者您正在创建无效的HTML,这将会产生一些不必要的副作用。