利用jquery 模仿renren.com的“删除新鲜事”的功能实现

这是js代码段：

 

<mce:script type="text/javascript"><!-- $(document).ready(function(){ $(".close").each(function () { $(this).click(function(){ $(this).parent().parent().fadeOut(500); }); }); });// --></mce:script>

这是html的dom

 

<div class="wish"> <a href="%{showWishUrl}" mce_href="%{showWishUrl}">第2个心愿</a> <div class="action"> <a href="#" mce_href="#"class="comment">3</a> <a href="#" mce_href="#"class="sup">12</a> <a class="close">关闭</a> </div> <br/> <p>最近生活过的很糟糕很不顺，希望柳暗花明，慢慢好起来</p> </div> <div class="wish"> <a href="%{showWishUrl}" mce_href="%{showWishUrl}">第2个心愿</a> <div class="action"> <a href="#" mce_href="#"class="comment">3</a> <a href="#" mce_href="#"class="sup">12</a> <a class="close">关闭</a> </div> <br/> <p>最近生活过的很糟糕很不顺，希望柳暗花明，慢慢好起来</p> </div> <div class="wish"> <a href="%{showWishUrl}" mce_href="%{showWishUrl}">第1个心愿</a> <div class="action"> <a href="#" mce_href="#"class="comment">3</a> <a href="#" mce_href="#"class="sup">12</a> <a class="close">关闭</a> </div> <br/> <p>生活无论有多艰难我都不会畏惧，反而更加勇敢面对 （希望可以和站长成为朋友，因为对你的感觉很好 377916225）</p> </div>

 

关键在于通过获取所有相同的.class，进行for循环

 

再通过.parent()获取父节点

 

最后.fadeOut(500);其中500为消失动画时间

 

完成

 

 

PS.

jquery确实很好用，例如这段代码实现简单，基本无侵入，还有不错的渐渐消失的动画效果~