2016-04-08 31 views
1

私はこのフィドルで少し助けが必要ですhttp://jsfiddle.net/zWkxt/6/ 基本的に、ボタンを使ってdivを追加したり削除したりする機能が必要です。あなただけsave.eq(0)を行うことができる理由 は常にあなたがオブジェクトを追加したら、それはあなたの変数から削除される...ボタンjqueryで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(); 
    }); 
}); 
+0

あなたがしようとしていることについてさらに説明してください。 –

+0

もう少し簡単なアプローチは、そのコレクションを配列に変換し、その方法を操作することです。ここでは、謎です:http://jsfiddle.net/zWkxt/11/ –

答えて

4

を最大数と見えるのdivを削除し、横にあるdiv要素を追加し、thatsの。 ...そうでなければ、それを歩かなければならないでしょう。

これを解決するにはいくつかの方法があります。クローンを挿入してクローンを挿入し、次のインデックスを移動することができます。

または、保存配列に戻すことができます。

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>

この1つは順序を保持します:

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>

この1つは、保存変数を管理していない、だけで何も順序から外れていないと仮定すると、現在表示されて何を見てインデックスを管理します。

私は最後の方をお勧めしますが、回答者には何かが必要な場合は、回答者に回答を残しておきます。

関連する問題