Jquery - 在追加后执行回调 [英] Jquery - Perform callback after append

问题描述

我使用以下内容将内容附加到列表中：

  $（'a.ui-icon-cart'）。 （function（）{
 $（this）.closest（'li'）。clone（）。appendTo（'＃cart ul'）; 
}）; 
  

我想对附加的内容执行进一步的功能（更改类，应用动画等） >

如何对这个函数执行回调，使我能够对附加的数据执行函数？

解决方案

jQuery的 .each（） 接受一个回调函数并将其应用到jQuery对象中的每个元素。

想象这样：

  $（'a.ui-icon-cart'）click（function（）{
 $（this）.closest（'li'）。clone ）.appendTo（'＃cart ul'）。each（function（）{
 $（this）.find（'h5'）。remove（）; 
 $（this）.find '）.css（{'height'：'40px'，'width'：'40px'}）; 
 $（this）.find（'li'）。css（{'height'：'60px' ，'width'：'40px'}）; 
}）; 
}）; 
  

您也可以存储结果，然后改为：

  $（'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'}）; 
}）; 
  

我也建议，不是mofiying CSS，像你只是添加一个类到你克隆的li像这样：

  $（this）.closest（'li'）。clone（）。addClass（new-item ）.appendTo（'＃cart ul'）; 
  

然后设置一些样式：

  .new-item img，.new-item li {height：40px; width：40px; } 
 .new-item h5 {display：none} 
  

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's .each() takes a callback function and applies it to each element in the jQuery object.

Imagine something like this:

$('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'});
});

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屋！