添加和删除div与按钮jquery

Question

我需要这个小提琴的一点帮助http://jsfiddle.net/zWkxt/6/ 所以基本上我想要添加和删除按钮div的功能。 始终删除与最大数量可见的div并添加DIV旁边...

<button class="add">add</button> 
<button class="remove">remove</button> 
<div class="targetdiv"> 
    <div class="special">div 1</div> 
    <div class="special">div 2</div> 
    <div class="special">div 3</div> 
    <div class="special">div 4</div> 
    <div class="special">div 5</div> 
    <div class="special">div 6</div> 
</div> 

jQuery(function() { 
    var save = $('.special').detach(); 
    $('.add').click(function() { 
      save.eq(0).appendTo(".targetdiv"); 
      save = save.filter(function(i) { return i; }); 
    }); 


    $('.remove').click(function() { 
      $('.special').last().detach(); 
    }); 
}); 

Answer 1

一旦你添加一个对象时，它会从你的变量删除，这就是为什么你可以做save​​.eq（0）。否则，你必须经过它。

有几种解决方法，你可以克隆它并插入克隆，然后移动下一个索引。

或者，您可以将其添加回保存阵列。 像这样：

jQuery(function() { 
 
    var save = $('.special').detach(); 
 
    $('.add').click(function() { 
 
    
 
      save.eq(0).appendTo(".targetdiv"); 
 
      save = save.filter(function(i) { return i; }); 
 
    \t \t \t \t \t  
 
    }); 
 
    
 
    
 
    
 
    $('.remove').click(function() { 
 
    
 
     save.push($('.special').last().detach()[0]); //Add it back to the array 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button class="add">add</button> 
 
<button class="remove">remove</button> 
 
<div class="targetdiv"> 
 
    <div class="special">div 1</div> 
 
    <div class="special">div 2</div> 
 
    <div class="special">div 3</div> 
 
    <div class="special">div 4</div> 
 
    <div class="special">div 5</div> 
 
    <div class="special">div 6</div> 
 
</div>

这一个人守秩序：

jQuery(function() { 
 
    var osave = $('.special').detach(); 
 
    var save=[] 
 
    for(i=0;i<osave.length;i++){ 
 

 
     save[i]=osave[i]; //Fix key reference 
 
    } 
 
    
 
    $('.add').click(function() { 
 
      //get the first index of the array 
 
      index=Object.keys(save).sort()[0]; 
 
      console.log(save,index); 
 
      $(save).eq(index).appendTo(".targetdiv"); 
 
      save.splice(index,1); //truly remove from save 
 
      //save = save.filter(function(i) { return i; }); 
 
      
 
    \t \t \t \t \t  
 
    }); 
 
    
 
    
 
    
 
    $('.remove').click(function() { 
 
     //How many are visible? 
 
     vis=$('.special').length-1; 
 
     save[vis]=($('.special').last().detach()[0]); //Add it back to the array with the right index. 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button class="add">add</button> 
 
<button class="remove">remove</button> 
 
<div class="targetdiv"> 
 
    <div class="special">div 1</div> 
 
    <div class="special">div 2</div> 
 
    <div class="special">div 3</div> 
 
    <div class="special">div 4</div> 
 
    <div class="special">div 5</div> 
 
    <div class="special">div 6</div> 
 
</div>

这一项工作的方式是将其分配的钥匙保存，确保它可以保留参考，然后将它添加到t中他记录，它将它们从保存中删除。当您从文档中删除它们时，它会将其添加回以保存正确的索引。

更好的版本：

jQuery(function() { 
 
    var osave = $('.special').detach(); 
 
    var save=[] 
 
    for(i=0;i<osave.length;i++){ 
 

 
     save[i]=osave[i]; //Fix key reference 
 
    } 
 
    
 
    $('.add').click(function() { 
 
      //get the first index of the array 
 
      //index=Object.keys(save).sort()[0]; 
 
      index=$('.special').length; 
 
      $(save).eq(index).appendTo(".targetdiv"); 
 
      //Dont remove from save. 
 
      //save = save.filter(function(i) { return i; }); 
 
      
 
    \t \t \t \t \t  
 
    }); 
 
    
 
    
 
    
 
    $('.remove').click(function() { 
 

 

 
     $('.special').last().detach()[0]; //Add it back to the array with the right index. 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button class="add">add</button> 
 
<button class="remove">remove</button> 
 
<div class="targetdiv"> 
 
    <div class="special">div 1</div> 
 
    <div class="special">div 2</div> 
 
    <div class="special">div 3</div> 
 
    <div class="special">div 4</div> 
 
    <div class="special">div 5</div> 
 
    <div class="special">div 6</div> 
 
</div>

这一个不管理保存的变量，只有通过观察什么目前看来，假设没有管理指数出毛病。

我建议最后一个，但留下其他人在答案incase你需要从他们的东西。