Jquery - 追加后执行回调 [英] Jquery - Perform callback after append
问题描述
我正在使用以下方法将内容附加到列表:
I am appending content to a list using:
$('a.ui-icon-cart').click(function(){
$(this).closest('li').clone().appendTo('#cart ul');
});
我想对附加的内容执行进一步的功能(更改类、应用动画等)
I want to perform further functions to the appended content (change class, apply animations etc)
如何对这个函数执行回调,以便我对附加数据执行函数?
How can I perform a callback on this function that will allow me to perform functions on the appended data?
推荐答案
jQuery 的 .each()
接受一个回调函数并将其应用到 jQuery 对象中的每个元素.
jQuery's .each()
takes a callback function and applies it to each element in the jQuery object.
想象一下:
$('a.ui-icon-cart').click(function(){
$(this).closest('li').clone().appendTo('#cart ul').each(function() {
$(this).find('h5').remove();
$(this).find('img').css({'height':'40px', 'width':'40px'});
$(this).find('li').css({'height':'60px', 'width':'40px'});
});
});
您也可以只存储结果并对其进行处理:
You could also just store the result and work on it instead:
$('a.ui-icon-cart').click(function(){
var $new = $(this).closest('li').clone().appendTo('#cart ul')
$new.find('h5').remove();
$new.find('img').css({'height':'40px', 'width':'40px'});
$new.find('li').css({'height':'60px', 'width':'40px'});
});
我还建议您不要像那样修改 CSS,而是像这样向克隆的 li 添加一个类:
I would also suggest that instead of mofiying the CSS like that you just add a class to your cloned li like this:
$(this).closest('li').clone().addClass("new-item").appendTo('#cart ul');
然后设置一些样式,例如:
Then setup some styles like:
.new-item img, .new-item li { height: 40px; width: 40px; }
.new-item h5 { display: none }
这篇关于Jquery - 追加后执行回调的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!