`

显示添加删除的数量-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();
	 });


最下面就是删除了

$(".shan").live('click', function() {
$(this).parent().remove("li");
appendTag();
});
这里有点不一样的就是添加了live属性方法附加的事件处理程序适用于匹配选择器的当前及未来的元素那么也就是说在后面添加进入的li里面通过这个属性也可以直接获得事件，然后可以删除，这边我是直接通过查询他的父类元素li然后通过this指定只删除当前的li不会出现在父类里出现多个li的问题 
<!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>
分享到：
| padding-20131111
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    QT可动态添加、删除控件的小项目

    项目中的关键部分是当控件数量达到一定阈值时，自动添加滚动条效果。在QT中，QScrollBar类提供了垂直和水平滚动条的功能。当一个QWidget（如QMainWindow或QWidget）的大小固定，但其内容超过边界时，可以设置...

    动态添加及删除控件（类似手机号码的添加及删除）

    你还可以添加一个标签（Label1）用于显示当前添加的控件数量。 **添加控件：** 1. 创建一个新的方法，例如`AddTextBoxAndButton`，用于动态生成文本框（TextBox）和按钮。在此方法中，你可以创建控件实例，设置其...

    cadence菜单使用说明

    - **设置复制个数**: 设置复制的数量。 - **设置文字大小**: 设置文字大小。 - **改变注释**: 改变注释。 - **删除**: 删除组。 - **设定颜色**: 设定组的颜色。 - **激活器件特性显示**: 激活器件特性的显示。 **9...

    jQuery添加删除标签代码

    // 为新标签添加删除事件 tagElement.click(function() { $(this).remove(); }); // 清空输入框 $('#tagName').val(''); } }); // 删除标签 $('#tagPanel').on('click', '.remove', function() { $(this...

    Android仿微信添加照片并且随意限制照片数量并显示缩略图界面

    4. 实现添加、删除照片的逻辑，以及更新缩略图视图的方法。 5. 可能还包括处理图片加载过程中的异常，如文件不存在、权限问题等。 在实现这个功能时，开发者需要注意以下几点： - **权限管理**：确保应用有读取外部...

    QT+TreeWidget 节点添加删除修改源码

    在`QT+TreeWidget 节点添加删除修改源码`项目中，主要涉及到以下几个关键知识点： 1. **QT基础知识**：首先，需要对QT库有基本的理解，知道如何创建一个QT项目，设置工程，以及编译和运行QT应用程序。了解QWidgets...

    arcgis-runtime-sdk-java-guide-100.4.0

    - 在地图上添加、删除或修改要素。 - 支持简单的几何编辑，如移动顶点、拉伸边界等。 - **编辑几何：** - 对要素的几何形状进行更精细的编辑。 - 包括切割、合并、分割等操作。 - **使用地理数据库事务：** -...

    AngularJS购物车商品数量加减计算代码

    在本文中，我们将深入探讨如何使用AngularJS实现购物车中的商品数量加减计算功能。...当然，实际项目中还可能涉及到更多细节，如商品的加载、删除、库存验证等，但以上知识点是实现商品数量加减计算的基础。

    仿购物车功能（添加、删除、结算、单选、全选商品等功能）

    购物车功能涉及到用户在浏览商品时，能够选择并暂存想要购买的商品，同时支持多种操作，如添加、删除、结算以及单选和全选商品。在这个过程中，接口回调和Bean绑定Tag等技术起到关键作用。 首先，我们要理解购物车...

    combo使用添加、删除、查找、设置当前显示

    ### Combo使用添加、删除、查找、设置当前显示 在软件开发过程中，组合框（ComboBox）是一种常见的用户界面元素，用于提供一系列预定义选项供用户选择。本文将详细介绍如何使用组合框进行添加、删除、查找以及设置...

    swift-TableViewCell反弹效果动画为了显示一个删除视图

    本篇文章将深入探讨如何在UITableView中实现Cell的反弹效果动画，以便在显示删除视图时为用户提供直观的反馈。这种效果常见于Apple的iOS系统应用中，如邮件、通讯录等，当用户滑动一个Cell时，会出现一个可操作的...

    tableview 中一行添加多个view，对view进行删除操作

    当需要添加或删除某个视图时，可以在Cell的模型数据中表示这一变化，然后在`- (void)configureCell:(UITableViewCell *)cell forIndexPath:(NSIndexPath *)indexPath`方法中根据模型数据调整Cell内视图的数量和内容...

    GridView添加行并且默认显示行数

    但是，在某些场景下，用户可能需要动态地添加或删除`GridView`中的行，这就需要对`GridView`进行自定义操作。 #### 技术需求与目标 本篇文档主要介绍如何在`GridView`中实现以下功能： 1. **添加按钮**：在`...

    android ListView 动态添加删除

    动态添加和删除ListView中的Item是一项常见的功能，尤其在构建需要用户交互的应用时。本文将深入探讨如何实现这个需求，以及涉及到的关键知识点。 首先，我们需要理解ListView的工作原理。ListView通过Adapter与...

    动态添加、删除菜单项

    在软件开发中，尤其是涉及到图形用户界面（GUI）的应用程序，动态添加和删除菜单项是一项常见的需求。这通常发生在根据用户权限、应用状态或者运行时条件来改变菜单栏的显示内容。下面我们将深入探讨这个话题，包括...

    asp+jquery ajax实例源码，添加，删除，修改，分页

    - 分页通常涉及服务器端的逻辑，ASP会计算总记录数和每页显示的数量，生成相应的页码。 - 前端通过AJAX请求特定页码的数据，ASP返回对应页的数据，前端动态渲染到页面上。 7. **AJAX与jQuery的结合** - jQuery的...

    ExpandableListView动态添加删除 ListView选择demo

    本篇文章将详细探讨如何在Android中使用ExpandableListView进行动态添加和删除操作，以及实现ListView的选择和删除功能。 首先，我们来看ExpandableListView。它是一种特殊的ListView，允许每个条目展开显示子条目...

    unix常用命令，大家可以看看。

    - **功能描述**：显示文件头部指定数量的行，默认为 10 行。 #### 1.8 `more` 命令 - **命令格式**：`more [选项] 文件` - **功能描述**：分页显示文件内容。 - `-c` 清除屏幕再显示文件。 - `-d` 显示提示信息...

    免费友情链接网自动收录

    2.友情链接一行显示数量由12个，改为9个一行！ 3.login.asp页面加入了导航菜单！ 4.特别提醒所有客户，网站上传后一定要修改data下在数据库名(改了数据库名，要改conn.asp和adminmaster/conn.asp和iP/conn.asp)! 5....

Magicbox
Global site tag (gtag.js) - Google Analytics