保存已插入DOM的jquery对象

Save jquery object that has been inserted into DOM

本文关键字：jquery 对象 DOM 插入 保存      更新时间：2023-09-26

我正在使用jQuery向DOM中添加一个标记图标。我希望它以不透明度0插入，然后立即以animate()出现。

目前我插入它是这样的：

$('.tag_boxes').append("<span class='tag_box' data-title='"+word+"'>"+word+"<a class='remove_tag'>x</a></span>");

有没有办法通过此操作立即将此<span>标记缓存为jQuery对象？这样我就可以在下一行调用animate了。类似于：

var s = $('.tag_boxes').append("<span class='tag_box' data-title='"+word+"'>"+word+"<a class='remove_tag'>x</a></span>");
s.animate({'opacity':1});

使用append()可能没有解决方案，但是否有其他函数可以做到这一点？

我知道我可以给标签一个ID，然后用jQuery访问它，但我怀疑这样做会查询DOM并重新查找该元素（如果我错了，请纠正我）——如果可能的话，我更喜欢使用最有效的解决方案。

从span HTML:创建一个jQuery对象

var s = $("<span class='tag_box' data-title='"+word+"'>"+word+"<a class='remove_tag'>x</a></span>");
$('.tag_boxes').append(s);
s.animate({'opacity':1});

另一个解决方案是使用CSS:

@-webkit-keyframes show_tag_box {
   0% { opacity: 0; }
   100% { opacity: 1; }
}
.tag_box {
  width: 100px;
  height: 100px;
  background-color: black;
  -webkit-animation: show_tag_box 500ms;
}

Fiddle。不要忘记浏览器前缀。

相关文章：