使用Jquery隨機刪除一個順序列表中某個子項目的方法，保持效果統一性

下面是我需要處理的一段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元素修改下，如下：
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結構變化後，能夠及時的顯示出來，比較好用。
效果如下：