代码之家 › 专栏 › 技术社区 › NekoLopez

如何在使用Jquery删除许多DIV元素时重置计数和修改类名

jquery javascript

NekoLopez · 技术社区 · 8 年前

<div class="elfile_1 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="elfile_2 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(2)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="elfile_3 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(3)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

<script>
 function delete_file(idx){
  $('.elfile_'+idx).remove();
 }
</script>

这很好,但现在我想重置这些元素的计数,所以我尝试更改为:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  for(var i = 0; i < inputs.length; i++){ 
    $(".fcot").each(function(){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_'+i);

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+i+')');
       });
    });
  }
}

但是,例如,当我删除第二个元素时,它不起作用,因为我得到了:

<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot  elfile_2">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(2)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

我需要你的帮助。

2 回复 | 直到 8 年前

bipen 8 年前

如果您使用counter只是为了知道需要删除的元素,那么请相信我。。别那么做。有一个更简单的方法。

在中传递“this”上下文 onclick

  function delete_file(me) {
    $(me).closest('div.fcot').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">a</i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">b</i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">c</i></button></div>

我建议保持代码整洁,并将javascript和HTML分开。如:

HTML格式:

<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>

$(function(){ //ready function to make sure DOM is loaded
    $('.some-button-name').click(function(){
          $(this).closest('div.fcot').remove(); 
     });  
});

剧本中的问题

如果在case中,您想按自己的方式(凌乱的方式:)),那么代码的问题是,您在那里有两个循环1)for和2)foreach。 i 对于导致问题的foreach的单个迭代保持不变。 foreach()

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  //for(var i = 0; i < inputs.length; i++){ 
    $(".fcot").each(function(i,v){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_'+ (i + 1)); // i + 1 here since index starts from 0

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+ (i + 1) +')');
       });
    });
  //}
}

fiddle link 有一段时间,我已经使用stackoverflow,所以不知道我是否可以在一个答案中有两个片段,所以添加小提琴链接。如果有可能的话,如果有人能编辑答案并在上面添加小提琴的内容,那就太好了。:)

Jobse 8 年前

你不应该使用 i for循环的值,但 each 循环。所以:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  for(var i = 0; i < inputs.length; i++){ 
    var j = 1;
    $(".fcot").each(function(){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_' + j);

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+i+')');
       });

       j++;
    });
  }
}