javascript - 保存已插入到 DOM 中的 jquery 对象

Question

我正在使用 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 并再次查找该元素(如果我错了，请纠正我) - 我更喜欢如果可能的话，使用最有效的解决方案。

Answer 1

从 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});