jquery - 使用按钮 jquery 添加和删除 div

Question

我需要一些关于这个 fiddle 的帮助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; });
   					     
    });
    
    
    
    $('.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; });
           
   					     
    });
    
    
    
    $('.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>

这个的工作方式是将键分配给保存，确保它可以保留引用，然后当它将它们添加到文档时，它将它们从保存中删除。当您从文档中删除它们时，它会将其添加回来以使用正确的索引进行保存。

更好的版本:

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; });
           
   					     
    });
    
    
    
    $('.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>

这个不管理保存变量，只通过查看当前 View 中的内容来管理索引，假设没有任何问题。

我推荐最后一个，但把其他的留在答案中，以防你需要他们的东西。