js删除dom节点时候索引出错问题
我们知道删除一个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节点时候索引出错问题的更多相关文章
- angular.js ng-repeat动态插入删除dom节点
既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- jQuery删除DOM节点
jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- js的DOM节点操作:创建 ,插入,删除,复制,查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- js中DOM 节点的一些操作方法
什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
随机推荐
- [UE4]虚幻4蓝图使用小技巧
不得不说,虚幻的蓝图系统还是非常方便强大的,大大的提高了开发效率.蓝图是一个很成熟的系统,也就有很多隐藏的小技巧,这些技巧谈不上多高深,却可以使人们在使用蓝图时更加得心应手,更加喜爱这个“可视化编程“ ...
- 关于Centos7 firewalld防火墙开放端口后仍不能访问ftp和nginx的问题解决
我在阿里轻量应用服务器搭建ftp服务器这篇博客中把防火墙换为iptables,因为当时无论我怎么设置firewalld,就是无法访问ftp服务器,今天在翻看其他博客的时候,突然发现firewalld有 ...
- Could not determine own NN ID in namespace 'mycluster'
执行hdfs namenode -bootstrapStandby的时候报错如下 19/03/24 18:00:48 ERROR namenode.NameNode: Failed to start ...
- android切换前后台状态监听
public class BaseApplication extends Application { private static BaseApplication instance; /** * 当前 ...
- Linux程序的执行
一.多任务协调机制 $ find /boot | cpio -ocB > /tmp/boot.img 程序执行方式——流式处理 “|”是匿名管道 管道分匿名管道,命名管道.匿名管道属于临时工,随 ...
- HBase脚本命令
1. 脚本使用小结1.开启集群 start-hbase.sh 2.关闭集群 stop-hbase.sh 3.开启/关闭[所有]的regionserver.zookeeper hbase-daemons ...
- courator - create
0. retry policy RetryPolicy retryPolicy = new ExponentialBackoffRetry(3000,3); 1. client 1) recipes ...
- django-request获取数据
request 如果说 urls.py 是 Django 中前端页面和后台程序桥梁,那么 request 就是桥上负责运输的小汽车 可以说后端接收到的来至前端的信息几乎全部来自于requests中. ...
- OpenStack各组件逻辑关系、通信部署关系及工作流程
一. OpenStack组件之间的逻辑关系 OpenStack 是一个不断发展的系统,所以 OpenStack 的架构是演进的,举个例子: E 版本有5个组件 Compute 是 Nova:Imag ...
- KVM总结-KVM性能优化之磁盘IO优化
前面讲了KVM CPU(http://blog.csdn.net/dylloveyou/article/details/71169463).内存(http://blog.csdn.net/dyllov ...