我们知道删除一个dom节点的时候索引就会发生了改变，甚至是错误，就算jq的ecah也无能为力，所以我们只能自己写个功能了

直接上代码把，不多说

<!DOCTYPE html> <html> <head>  <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Add jQuery library -->  <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>

<!-- Add mousewheel plugin (this is optional) --> <!-- <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script> -->  <!-- Add fancyBox main JS and CSS files -->  <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>  <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->  <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /> <!-- <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> -->  <!-- Add Thumbnail helper (this is optional) -->  <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" /> <!-- <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> -->  <!-- Add Media helper (this is optional) --> <!-- <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> --> </head> <style> *{  margin:0;  padding:0;}  li{ list-style:none;}  #div{   margin:20px;    height:auto;   width:auto;   overflow:hidden;      }  #div   div {    height:30px;     width:30px;     overflow:hidden;      position:absolute;     right:0px;     top:0px;      z-index:9;    }    #div .closs  {     position:absolute;     left:-4px;     top:-2px;      }      #ul1{    height:auto;    width:auto;     overflow:hidden;     background:#ccc;    }     #div li{      position:relative;      height:100px;      width:100px;      float:left;      margin:5px;      }      #div li > img{         height:100px;            width:100px;      position:absolute;      left:0px;      top:0px;       }       #div li span{        position:absolute;        left:0px;        top:0px;        opacity:0;         filter:alpha(opacity=0);         z-index:3;         height:100px;               width:100px;      background:red;         }      #makImg{        display:none;       }  </style>  <body>  <input  type="button" id="but" value="添加图片"/>  <div id="div">         <!--ul li img -->       <ul id="ul1">           <!--     <li>                                <div   >                       <img  class = "closs"    src="../source/fancybox_sprite.png" />                   </div>                    <img class="main" src="1_b.jpg" />                    <span class='makClick'>1</span>               </li>                                          <li>                                              <div   >                       <img class = "closs"  src="../source/fancybox_sprite.png" />                   </div>                    <img class="main" src="1_b.jpg" />                    <span class='makClick'> </span>               </li>                                          <li>                                               <div   >                       <img  class = "closs"  src="../source/fancybox_sprite.png" />                   </div>                    <img class="main" src="1_b.jpg" />                    <span class='makClick'> </span>               </li>                                          <li>                                              <div   >                       <img  class = "closs"    src="../source/fancybox_sprite.png" />                   </div>                    <img class="main" src="1_b.jpg" />                    <span class='makClick'> </span>               </li>-->           </ul>  </div>        <div id='makImg'>   <!--<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>

<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>

<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>

<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>-->  </div>    <script> $(document).ready(function() {       $(".fancybox-effects-a").fancybox({     helpers: {      title : {       type : 'outside'      },      overlay : {       speedOut : 0      }     }    });    });         var Odiv = document.getElementById('div'),          Obut =  document.getElementById('but');        function getByClass(o_parentId, class_name){            var  obj_arr = [ ],               obj_s = o_parentId.getElementsByTagName("*");         for(var i = 0 , len = obj_s.length; i < len; i++){               if(obj_s[i].className == class_name){                 obj_arr.push(obj_s[i]);            }         }             return  obj_arr;     }              var  evnet_index = {                       setIndex : function(obj_arr){             for(var i = 0, len = obj_arr.length; i < len ;i++ ){                                obj_arr[i].index = i;                           }           },           getIndex : function(o_parent, event_type, class_name , fn){                  var  target_obj = new Object( );             o_parent['on'+event_type]= function( e ){                     var ev = e || window.event,                                                   target = ev.target || ev.srcElement;                  if(target.className == class_name){                         fn && fn({obj : target , index : target.index});                     }               }             }               }          var add_remove_child = {          RemoveChild : function (obj,index){                 var    nwe_obj =  obj[0];                      nwe_obj.parentNode.removeChild(obj[index]);           },          AddMaxImg : function(src){                             var a_obj = document.createElement('a');                 a_obj.className = "fancybox-effects-a";              a_obj["data-fancybox-group"] = 'button';              a_obj.href = src;                          var img_obj = document.createElement('img');                 img_obj.src = src;               a_obj.appendChild(img_obj);            return  a_obj;                              },          AddUl :  function  ( ){            if(Odiv.getElementsByTagName('ul').length>=1){              return  Odiv.getElementsByTagName('ul')[0];             }else{            var       Oul = document.createElement('ul');               Odiv.appendChild(Oul);             return Oul;             }                       },      AddChild :  function  (src){          var     Oli = document.createElement('li');           Oli_div = document.createElement('div');                     Oli.appendChild(Oli_div);                var    Oli_div_img  = document.createElement('img');                   Oli_div_img.className = 'closs';             Oli_div_img.src = '../source/fancybox_sprite.png';                         Oli_div.appendChild(Oli_div_img);                    var    Oli_img   = document.createElement('img');             Oli_img.src = src;             Oli.appendChild(Oli_img);                    var    Oli_span = document.createElement('span');                   Oli_span.style.zIndex = 3;             Oli_span.className = 'makClick';             Oli.appendChild(Oli_span);                       return  Oli;       }          };        var img_index = 0;     Obut.onclick = function( ){          img_index = (img_index <  5)?(img_index+1):1;         document.getElementById('makImg').appendChild(add_remove_child.AddMaxImg(img_index+'_b.jpg'));           add_remove_child.AddUl( ).appendChild(add_remove_child.AddChild( img_index+'_b.jpg'));        evnet_index.setIndex(getByClass(Odiv,  'makClick'));        evnet_index.setIndex(getByClass(Odiv, 'closs'));     }           //事件所有的子对象只能绑定一个父对象，不能多个类的子对象绑定相同的父对象。      evnet_index.setIndex(getByClass(Odiv,  'makClick'));        evnet_index.getIndex(document.getElementById('div'), 'click' ,'makClick' , function(obj){              ;              alert(obj.index);        $('.fancybox-effects-a').eq(obj.index).trigger('click');       });               //事件所有的子对象只能绑定一个父对象，不能多个类的子对象绑定相同的父对象。    evnet_index.setIndex(getByClass(Odiv, 'closs'));      evnet_index.getIndex(document.getElementById('ul1'), 'click' ,'closs' , function(obj){          img_index--;         add_remove_child.RemoveChild(document.getElementById('makImg').getElementsByTagName('a'),obj.index);          add_remove_child.RemoveChild(document.getElementById('ul1').getElementsByTagName('li'),obj.index);                  evnet_index.setIndex(getByClass(Odiv,  'makClick'));            evnet_index.setIndex(getByClass(Odiv, 'closs'));          alert(obj.index);              });             </script> </body> </html>

js删除dom节点时候索引出错问题的更多相关文章

  1. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  2. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  3. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  4. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  5. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  6. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  7. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  8. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  9. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

随机推荐

  1. 切换了webview 定位不了的解决方法 (还没有试，记录在此)

    # 切换到 webview time.sleep(2) print(driver.contexts) driver.switch_to.context('WEBVIEW_com.tencent.mm: ...

  2. 开发框架-.Net：Learun（力软敏捷开发）

    ylbtech-开发框架-.Net:Learun(力软敏捷开发) 1.返回顶部   2.返回顶部 1. 系统简介:(1)后台采用MVC+EF架构,前台使用Jquery+Bootstrap,界面美观大气 ...

  3. pj1--学生信息管理系统

    1.根据班上的情况做一个班级学生信息管理系统.包含功能有每日签到.学分管理.个人信息管理 2.要求:用winform+序列化(本地化)的技术实现,以教师机做服务器,要有文件保存.读取.还要有上传头像功 ...

  4. 廖雪峰Java2面向对象编程-5包和classpath-1静态字段和方法

    1.静态字段 1.1定义:用static修饰的字段称为静态字段 普通字段在每个实例中都有自己的一个独立的空间 静态字段只有1个共享空间,所有实例都共享该字段. public class Person{ ...

  5. 02-zip文件打包

    package com.day1; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...

  6. python序列化模块

    什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 序列化的目的 1.以某种存储形式使自定义对象持久化: 2.将对象从一个地方传递到另一个地方. 3.使程序更具维护性.   ...

  7. 电商系统架构总结1（EF）

    最近主导了一个电商系统的设计开发过程,包括前期分析设计,框架搭建,功能模块的具体开发(主要负责在线支付部分),成功上线后的部署维护,运维策略等等全过程. 虽然这个系统不是什么超大型的电商系统 数亿计的 ...

  8. Linux设置Oracle环境变量

    方法一:直接运行export命令定义变量,该变量只在当前的shell(BASH)或其子shell(BASH)下是有效的,shell关闭了,变量也就失效了,再打开新shell时就没有这个变量,需要使用的 ...

  9. Spring配置,事务使用

    1.spring redis session超时配置 <bean class="org.springframework.session.data.redis.config.annota ...

  10. django 之admin使用

    Admin注册 内容发布的部分由网站的管理员负责查看.添加.修改.删除数据,开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地生成管理模块. 1)准备工作 ...