一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > jquery

推荐专题

最新下载

热门教程

jQuery增加删除HTML标签实例详解

时间：2013-10-14 编辑：简简单单 来源：一聚教程网

昨天在写 jQuery 的时候碰到个小问题纠结了我蛮久，后来在 foxling 的指点下才知道是那么一回事。

问题是这样滴，有一个 UL 列表，在某个事件响应之后要把 UL 列表里面的 LI 内容给逐行移除掉，于是有了下面的 HTML 代码：

 代码如下 复制代码


      
  • 1

    •   
  • 2

    •   
  • 3

    •   
  • 4

    •   
  • 5


删除

以及下面的 JavaScript 代码：

 代码如下 复制代码
$('#del').click(function(){
   var list = $('#test');
   var len = list.find('li').length;
 
   for(var i = 0; i < len; i++){
      list.find('li:eq('+ i +')').remove();
   }
});

我刚写完的时候觉得逻辑很合理，应该没什么问题，先计算出 UL 标签里面有多少个 LI ，然后利用 For 循环逐个把里面每个 LI 的内容移除掉，但是代码一执行的时候，问题就出来了，它并没有把里面的内容全部移除掉，而是还有一些 LI 遗留在页面上。

 代码如下 复制代码





Insert title here





     
  • 1

    •  
  • 2

    •  
  • 3

    •  
  • 4

    •  
  • 5

    •  
  • 6

    •  
  • 7

    •  
  • 8

    •  
  • 9

    •  
  • 10


删除

。

后来在 foxling 的指点下，才得知这其中的原因，就是当 i 等于 0 的时候，这时是正确的删除了第一个 LI 标签(其索引为 0)；当 i 等于 1 的时候，原来列表中的第 2 个 LI 标签的索引由于前一个 LI 标签被删除的原因从 1 变成了 0，所以该 LI 标签并没有被移除，而此时被移除的是原来列表中的第 3 个 LI 标签，此时它的索引已变为 1 了，如此循环……这就是为什么执行完该 for 循环之后还有一些内容没有被移除的原因了。

上面的 JavaScript 只要修改一点点的地方就 OK 了：

 代码如下 复制代码

$('#del').click(function(){
   var list = $('#test');
   var len = list.find('li').length;
 
   for(var i = 0; i < len; i++){
      list.find('li:eq(0)').remove();//因为每次循环删除一个 LI 标签后，跟在其后的 LI 标签的索引都变为了 0
   }
});


例

 代码如下 复制代码


















    • 再看执行js后效果:




  •







    • 对比一下就知道啦.li的id为fileid18的被删除了.
    主要代码如下:

     代码如下 复制代码

    $('li').remove('#fileid'+fid);


    例2

     代码如下 复制代码








     

       

     

     



    相关文章

    热门栏目

    一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

    copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

    网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理