显示添加删除的数量-20131124
这是一段可以显示出ul里面的li的数量不论是添加还是删除都可以很好的展示出来,不会因为在后面juqery添加的进去的li没有事件而完成不了
主要是显示数量
他可以传入添加和删除里面,让的添加和删除以后的数量都能读取的到//首先定义一个函数让 function appendTag(){ //为了方便直接将指定ulclass里的li的读取的长度也就是数量定义好 var gg = $(".ss li").length; //这里做一个判断,因为在没有的时候显示出来的还是会有一个0在所以就判断一下当获得li数量等于0的时候那么显示出来的位置上就是null空不展示没有 if(gg == 0) { $(".inputAA").html(null); //否则 不是0的话就正常的展示出来他本来的数量 }else{ $(".inputAA").html(gg); } }然后是添加这一段//定义个点击的事件,然后把需要创建的li和它的内容都写好通过append这个属性,是可以直接往页面中添加html代码,用这个把要需要的内容添加进入,在让添加后li数量发生变化后能让显示功能正常读取到所以把appedTag放在里面$(".chaungjian").click(function(){ $(".ss").append("<li>创建成功<p class='shan'>删除</p></li>"); appendTag(); });
<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script>$(document).ready(function(){$(".chaungjian").click(function(){ $(".ss").append("<li>创建成功<p class='shan'>删除</p></li>"); appendTag(); }); $(".shan").live('click', function() { $(this).parent().remove("li"); appendTag(); }); function appendTag(){ var gg = $(".ss li").length; if(gg == 0) { $(".inputAA").html(null); }else{ $(".inputAA").html(gg); } } appendTag();});</script></head><body><p class="inputAA"></p><ul class="ss"><li>原始的1<p class="shan">删除</p></li><li>原始的2<p class="shan">删除</p></li></ul><div class="chaungjian">创建</div></body></html>