添加和刪除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你需要從他們的東西。