如何在每个循环中删除div后重新排序div ID

时间:2014-06-16 10:13:31

标签: javascript jquery arrays file

让我自己的逻辑正常工作

我获取存储在数组中的所有文件,并在总计 div中显示id total 的div,即时显示所有文件在jquery的每个循环中使用ids div_selec + int_loop 进行div。

这样我在div中显示所有文件:

   var int_loop =  1;
     $(upfiles).each(function(index, file) 
    {
        display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' id='remove_"+int_loop+"' src='images/DeleteRed.png' />";
        $('#total').append("<div id='div_selec"+int_loop+"' "+style_limitexceed+"><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>" ); 
//DELETE CODE HERE AS DEFINED BELOW
    }

现在,当用户点击删除图标时,我会从数组中移除文件 upfiles

这是删除代码

 $("#remove_"+int_loop).click(function() {
 var curr_id = this.id;
 var id = curr_id.substr(7);
 alert(index + ' this id ' + id);
 upfiles.splice(index, 1);
}

问题是,如果div中有3个文件,当用户删除'div_selec"+int_loop+"'中的第一个文件时,它会删除第一个文件,但是当用户尝试删除第二个文件时删除第一个文件后:它正在删除第3个文件而不是第2个

因为从数组中删除值后,数组正在重置值,但是在每个循环中都不会重新排序ID。那么如何解决这个问题?

希望你们理解我的问题...

编辑

$(upfiles).each(函数(索引,文件)如果你能在代码中看到这一行.index没有重置,我正在使用这个索引从数组中删除文件。一旦文件从数组中删除,数组正在重置,但索引不是

2 个答案:

答案 0 :(得分:2)

我认为当你使用splice函数从数组中删除值时,所有其他变量都会向上移动一级。对于Ex,有一个名为fruits的数组。

0:香蕉1:苹果2:葡萄

现在如果你删除Apple而不是新数组

0:香蕉1:葡萄

所以Grapes的索引将是2比1 ...... 这就是你的第三个文件被删除的原因......

这是解决方案但未经过测试...我认为当你使用splice函数从数组中删除值时,所有其他变量都会向上移动一级。对于Ex,有一个名为fruits的数组。

0:香蕉1:苹果2:葡萄

现在如果你删除Apple而不是新数组

0:香蕉1:葡萄

所以Grapes的索引将是2比1 ...... 这就是你的第三个文件被删除的原因......

这是解决方案但未经过测试...

  $(upfiles).each(function(index, file) 
{
    display_removebutton = "<img class="delete_img" data-id='"+int_loop+"' width='20px' style='cursor:pointer;' height='20px' class='class_remove' id='remove_"+int_loop+"' src='images/DeleteRed.png' />";
    $('#total').append("<div id='div_selec"+int_loop+"' "+style_limitexceed+"><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>" ); 

}

我在img中添加了data-id属性,在代码上面添加了类'delete_img'标签...

$('body').on('click','.delete_img',function() {
 var curr_id = $(this).attr('data-id');
var index_id = jQuery.inArray( curr_id, upfiles)
 upfiles.splice( index_id, 0 );
 $(this).closest('div').remove();

}

这里我假设您使用id作为数组值.... 所以我在这里找到索引值并删除值....

还假设您没有在数组中存储两次相同的值...

未经测试,但您可能会使用它......

答案 1 :(得分:0)

终于得到了我自己的逻辑并且工作正常现在我已经采取了另一个每个循环并检查外部文件名和内部循环文件名是否相同然后拼接或者什么都没有