使用Jquery随机删除一个顺序列表中某个子元素的方法,保持效果统一性
2011-07-21 09:44
477 查看
下面是我需要处理的一段DIV,其中有顺序排列的10张图片,我需要随机删除其中的某一种,依然保持一种顺序,让最好的一张保持留空。
其中尝试了好几张方法,都没有获得成功,非常奇怪,效果类似如下说明图:
A B
C D
E F
G H
比如用户随机删除B,效果变为:
A C
D E
F G
H
原来觉得比较简单的,可是中间还是花了一番周折,惭愧!
最老土的方法,就是删除前的元素,保存DOM结构数组,用户删除后,获取删除后的用户DOM数组,然后重置所有元素的id,位置,进行计算,...
结果没有成功,因为这里的A,包括了img, div, link,等等元素,在最好宣布无效。而且如果用户只需要删除比较靠后的元素,前面的元素不需要
变动,怎么办?原来也考虑,采用reverse()方法,使得所有元素的顺序调换下,因为最终要实现的效果是:把C,变为B的定位,其中img的id,div的class,link的
href元素修改下,如下:[code]javascript:confirmDeletephoto('photo0',
结果reverse()方法,无法顺序变为我想要的DIV反转的效果,中间也使用过2次遍历DIV,第一次获取删除元素及其后面的元素的样式,id等需要的信息,
存入到数组,第二次,再进行操作,效果依然有错误,经过几次摸索,最终效果形成了,只是第二次是遍历的时候,注意要删除元素的时间点,和jquery中
的.each()方法的一些特性,中间之所以失败,可能由于元素被删除以后,位置变化了,你在使用jquery()中的类似prev()和next()方法的时候,差异非常
明显。下面是HTML的DOM结构:
<div style="position: absolute; left: -20px; top: 50px;" id="insert"><div id="photoPage0" class="photoPage"><img style="position: absolute; top: 0px; left: -145px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200913571.jpg" id="photo0"><div style="position: absolute; top: 32px; left: -170px; width: 100px; text-align: center;" class="photo0"><span style="font-size: 9px;">1 MB</span><br><a href="javascript:confirmDeletephoto('photo0','1107200913571.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 0px; left: -65px; width: 50px; height: 40px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200917371.jpg" id="photo1"><div style="position: absolute; top: 41px; left: -90px; width: 100px; text-align: center;" class="photo1"><span style="font-size: 9px;">316 KB</span><br><a href="javascript:confirmDeletephoto('photo1','1107200917371.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 92px; left: -145px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200917411.jpg" id="photo2"><div style="position: absolute; top: 124px; left: -170px; width: 100px; text-align: center;" class="photo2"><span style="font-size: 9px;">284 KB</span><br><a href="javascript:confirmDeletephoto('photo2','1107200917411.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 92px; left: -65px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200917441.jpg" id="photo3"><div style="position: absolute; top: 124px; left: -90px; width: 100px; text-align: center;" class="photo3"><span style="font-size: 9px;">265 KB</span><br><a href="javascript:confirmDeletephoto('photo3','1107200917441.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 184px; left: -145px; width: 50px; height: 45px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200917451.jpg" id="photo4"><div style="position: absolute; top: 230px; left: -170px; width: 100px; text-align: center;" class="photo4"><span style="font-size: 9px;">82 KB</span><br><a href="javascript:confirmDeletephoto('photo4','1107200917451.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 184px; left: -65px; width: 50px; height: 37px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200917461.jpg" id="photo5"><div style="position: absolute; top: 222px; left: -90px; width: 100px; text-align: center;" class="photo5"><span style="font-size: 9px;">64 KB</span><br><a href="javascript:confirmDeletephoto('photo5','1107200917461.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 276px; left: -145px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200917471.jpg" id="photo6"><div style="position: absolute; top: 308px; left: -170px; width: 100px; text-align: center;" class="photo6"><span style="font-size: 9px;">52 KB</span><br><a href="javascript:confirmDeletephoto('photo6','1107200917471.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 276px; left: -65px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200918541.jpg" id="photo7"><div style="position: absolute; top: 308px; left: -90px; width: 100px; text-align: center;" class="photo7"><span style="font-size: 9px;">689 KB</span><br><a href="javascript:confirmDeletephoto('photo7','1107200918541.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 368px; left: -145px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200918561.jpg" id="photo8"><div style="position: absolute; top: 400px; left: -170px; width: 100px; text-align: center;" class="photo8"><span style="font-size: 9px;">662 KB</span><br><a href="javascript:confirmDeletephoto('photo8','1107200918561.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div><img style="position: absolute; top: 368px; left: -65px; width: 50px; height: 31px; border: 1px solid silver;" src="/files/photos/87228/thumbs_web/1107200918591.jpg" id="photo9"><div style="position: absolute; top: 400px; left: -90px; width: 100px; text-align: center;" class="photo9"><span style="font-size: 9px;">573 KB</span><br><a href="javascript:confirmDeletephoto('photo9','1107200918591.jpg','front','132479','0')"><img src="/images/delete_icon.gif">delete</a></div></div></div>
$("#photoPage0").children("img").each(function(i, dom){if (i >= index) { //match//console.log('id=' + $(dom).attr("id"));//console.log('imgLeft=' + $(dom).css("left") + '; imgTop=' + $(dom).css("top"));//console.log('divLeft=' + $(dom).next("div").css("left"));var deletedImgLeft = $(dom).css("left");var deletedImgTop = $(dom).css("top");var deletedDivLeft = $(dom).next("div").css("left");var deletedId = $(dom).attr("id");// //var nextSrc = $("#" + "photo" + nextdeletedId).attr("src");var posObj = {deletedImgLeft : deletedImgLeft,deletedImgTop : deletedImgTop,deletedDivLeft : deletedDivLeft,deletedId : deletedId};posObjArr.push(posObj);// $(dom).attr("src", nextSrc)// return;}});posObjArr.pop();//console.log("\n\n\nposObjArr=" + posObjArr.length + "\n\n\n");$("#photoPage0").children("img").each(function(i, img){if (i == index) {$("#" + id).detach();$("." + id).detach();} else {if (i > index) {var deletedImgLeft = posObjArr[0].deletedImgLeft;var deletedImgTop = posObjArr[0].deletedImgTop;var deletedDivLeft = posObjArr[0].deletedDivLeft;var deletedId = posObjArr[0].deletedId;//console.log("i===>" + i);//console.log("deletedImgLeft===>" + deletedImgLeft);//console.log("deletedImgTop=" + deletedImgTop);//console.log("deletedDivLeft=" + deletedDivLeft);//console.log("deletedId=" + deletedId);//console.log("\n\n");$(img).css("left", deletedImgLeft);$(img).css("top", deletedImgTop);$(img).next("div").css("left", deletedDivLeft);var deletedDivTop = Math.round(parseInt($(img).css("top")) + parseInt($(img).css("height")) + 1);$(img).next("div").css("top", deletedDivTop);// $("#" + "photo" + i).attr("id", deletedId);// $("." + "photo" + i).attr("class", deletedId);var href = $(img).next("div").children("a").attr("href");var newId = "photo" + (parseInt(i) - 1);var newH = href.replace(/photo(\d+)/, newId);$(img).next("div").children("a").attr("href", newH);$(img).attr("id", newId);$(img).next("div").attr("class", newId);//console.log("newid=" + newId);posObjArr.shift();}}});更好的熟练使用Jquery的一些特性,这样可以少走很多弯路。FF的firebug不亏是5星级的应用,在DOM结构变化后,能够及时的显示出来,比较好用。效果如下:
相关文章推荐
- jQuery根据元素值或元素下标来删除一个数组元素及数组对象方法列表
- jQuery删除一个元素后淡出效果展示删除过程的方法
- jQuery根据元素值或元素下标来删除一个数组元素及数组对象方法列表
- jQuery根据元素值或元素下标来删除一个数组元素及数组对象方法列表 1
- jQuery使用removeClass方法删除元素指定Class的方法
- jquery之操作元素属性和特性(删除特性,removeAttr()方法的使用)
- 【jQuery】使用jQuery的clone()方法来克隆元素时,如何保持id的唯一性
- Jquery根据元素值或元素下标来删除一个数组元素及数组对象方法
- jquery之设置元素内容(删除元素,使用remove(),empty()方法)
- jQuery 使用remove()和empty()方法删除元素(参考慕课网)
- jQuery各种选择器、节点、事件,删除、复制、插入元素的使用方法总结
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- 查找排序(顺序查找)一个表长100的顺序存储表,要求使用顺序查找列表中的元素并输出
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- jquery使用remove()方法删除指定class子元素
- 【jQuery】使用remove()和empty()方法删除元素
- 将栈S1中的元素复制到栈s2中,并保持顺序不变,使用额外的一个栈
- Python面试题 之 Uniquify a list 不使用set去除一个列表中的重复项,并且保持原有的排列顺序
- 【JQuery】使用remove()和empty()方法删除元素
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表