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

【问题标题】：how to reorder div ids after removing a div in each loop如何在每个循环中删除 div 后重新排序 div id
【发布时间】：2014-08-06 03:19:25
【问题描述】：

我自己的逻辑工作正常

我正在获取存储在数组中的所有文件，并显示在一个 ID 为 total 的 div 中，在一个 total div 中，我单独显示所有文件div 的 id 为 div_selec+int_loop 在 jquery 的每个循环中。

这样我在一个 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+"' 中的第一个文件时，它会删除第一个文件，但是当用户尝试删除第二个文件时删除第一个文件后：它是删除第三个文件而不是第二个

因为从数组中删除值后，数组会重置值，但在每个循环中，id 不会重新排序。那么如何解决呢？

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

已编辑

$(upfiles).each(function(index, file) 如果您可以在代码中看到这一行。索引未重置，我使用此索引从数组中删除文件。一旦文件从数组中删除，数组正在重置但索引没有

【问题讨论】：

使用 id 看起来不是存储您感兴趣的数据的正确方法。您可能会发现使用 classes 更容易i> 和或 data-* 属性
$(upfiles).each(function(index, file) 如果您可以在代码中看到这一行。索引未重置，我正在从数组中删除文件这个索引。一旦从数组中删除文件，数组正在重置，但索引不会
各位大侠帮我解决这个问题

标签： javascript jquery arrays file

【解决方案1】：

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

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

现在，如果您删除 Apple，则新数组将是

0：香蕉 1：葡萄

所以葡萄的指数将是 2 比 1... 这就是你的第三个文件被删除的原因......

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

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

现在，如果您删除 Apple，则新数组将是

0：香蕉 1：葡萄

所以葡萄的指数将是 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 和 class 'delete_img' 标签中添加了 data-id 属性...

$('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 作为你的数组值.... 所以我在这里从值中找到索引并删除值....

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

未经测试，但您可能对使用它有所了解....

【讨论】：

是的，完全是@shail，我也知道。但是如何克服这个问题
添加或添加？没有看到任何解决方案
upfiles.splice( upfiles.indexOf( curr_id ), 1 ); 这行会做什么
在这一行upfiles.indexOf( curr_id ) 首先我从值中找到索引...然后我将此索引传递给拼接函数...
我在每个循环中还是在循环外都写了这个？

【解决方案2】：

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

【讨论】：