js刪除dom節點時候索引出錯問題

我們知道刪除一個dom節點的時候索引就會發生了改變，甚至是錯誤，就算jq的ecah也無能為力，所以我們只能自己寫個功能了直接上代碼把，不多說 <!DOCTYPE html> <html> <head> <title>fancyBox - Fancy jQuery Lightbox Alternat ...

我們知道刪除一個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" />

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

<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" />

<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />   <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />    </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 id="ul1">  </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="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>