如何使用jQuery detach（）方法將元素切入和切出DOM？

Question

我有一組網格排列的div。

款式每格我與nth-child()pseudo-class選擇它們。

div.tile:nth-child(4n-7) .text { background-color: yellow; } 

用戶可以通過點擊按鈕（其觸發一個jQuery函數，增加了一個display: none規則到class屬性在選定DIV）隱藏的div。

jQuery的

$('.hide-divs').click(function() { 
    $('.dolphin').toggleClass('hidden'); 
    }) 

CSS

.hidden { display: none; } 

這裏的問題：

即使display: none從屏幕移開的股利，它不會刪除從DOM的div，所以nth-child選擇器在應用樣式時仍會對其進行計數，這樣會擾亂網格的視覺設計。

上述佈局被打破，因爲只有第一列應爲黃色。

所以我的第一個想法是使用jQuery remove() method，它將元素（及其後代）帶出DOM。

原來，但是，一旦remove()應用，你不能得到這些div回來。他們走了。因此切換功能中斷。

經過一番研究，我發現jQuery detach() method與.remove()的功能完全相同，只是它存儲了已刪除元素的數據供以後使用。

從jQuery website：

.detach()的方法是相同的.remove()，不同之處在於 .detach()保持與除去 元件相關聯的所有的jQuery的數據。如果刪除的元素將在稍後重新插入到DOM中，此方法非常有用。

一切看起來不錯detach()與切換開關一起工作，除了我的努力實施它是行不通的。

我用example on the jQuery website作爲指南，但它不適用於電網。我也讀過這個網站上的各種相關帖子，但無濟於事。我肯定錯過了什麼。

任何反饋將不勝感激。

http://jsfiddle.net/tfyfpbb2/

$('.hide-divs').click(function() { 
 
    $('.dolphin').toggleClass('hidden'); 
 
})

.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 500px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.text { 
 
    height: 50px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    padding-top: 15px; 
 
    background: tomato; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 2em; 
 
} 
 
.tile:nth-child(4n-7) .text { 
 
    border: 2px solid #ccc; 
 
    background-color: yellow; 
 
    color: #000; 
 
} 
 
button { 
 
    padding: 10px; 
 
    background-color: lightblue; 
 
    position: relative; 
 
    left: 200px; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="tile"> 
 
     <div class="text">01</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">02</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text dolphin">03</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">04</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">05</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text dolphin">06</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">07</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text dolphin">08</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">09</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">10</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">11</div> 
 
    </div> 
 

 
    <div class="tile"> 
 
     <div class="text">12</div> 
 
    </div> 
 

 
    </div><!-- end .row --> 
 

 
    <button type="button" class="hide-divs">HIDE DIVS 3, 6 &amp; 8</button>

Answer 1

我建議仍然使用detach。您可以使用此代碼這樣做：

var divs; 

$('.hide-divs').on('click', function() { 
    if(divs) { 
     $(divs).appendTo('.row'); 
     divs = null; 
    } else { 
     divs = $('.dolphin').parent().detach(); 
    } 
}); 

然後，以確保相同的順序時，我想出了這段代碼：

$('.tile').each(function(i){ 
    $(this).data('initial-index', i); 
}); 

... 

$(divs).each(function(){ 
    var oldIndex = $(this).data('initial-index'); 
    $('.tile').eq(oldIndex).before(this); 
}); 

把它放在一起，我們得到這個代碼：

var divs; 

$('.tile').each(function(i){ 
    $(this).data('initial-index', i); 
}); 

$('.hide-divs').on('click', function() { 
    if(divs) { 
     $(divs).appendTo('.row').each(function(){ 
      var oldIndex = $(this).data('initial-index'); 
      $('.tile').eq(oldIndex).before(this); 
     }); 
     divs = null; 
    } else { 
     divs = $('.dolphin').parent().detach(); 
    } 
}); 

演示上的jsfiddle：http://jsfiddle.net/tqbzff2v/2/

Answer 2

我不是很肯定，如果這你想要做什麼 - http://jsfiddle.net/tfyfpbb2/1/

如果是這樣，你只需要添加三個行類而不是一個。這樣每一行都有自己的「空間」，不會錯過下一行的樣式。

<div class="row"> 
    <div class="tile"> 
     <div class="text">01</div> 
    </div> 

    <div class="tile"> 
     <div class="text">02</div> 
    </div> 

    <div class="tile"> 
     <div class="text dolphin">03</div> 
    </div> 

    <div class="tile"> 
     <div class="text">04</div> 
    </div> 
</div> 

希望有幫助！讓我知道如果這不是你想要的，我可以編輯我的答案。

Answer 3

每個人都很接近，但在這裏是完全WH在你正在尋找與您目前的HTML標記：http://jsfiddle.net/vs5o5nLb/2/

訣竅是提前設置自己需要實際切換，然後保持信息插入和分離。

var $els = $('.tile'); 
var stack = []; 
var isShown = true; 

$els.each(function() { 
    var $this = $(this); 
    if ($this.find('.dolphin').length) { 
     stack.push({ 
      $el : $this, 
      index : $els.index(this) 
     }); 
    } 
}); 

$('.hide-divs').click(function() { 
    if (isShown) { 
     $.each(stack, function() { 
      this.$el.detach(); 
     }); 
     isShown = false; 
    } else { 
     $.each(stack, function() { 
      $('.tile').eq(this.index).before(this.$el); 
     }); 
     isShown = true; 
    } 
}); 

我希望它有幫助。

Answer 4

我已經使用remove（）和toggle來刪除和刪除元素。例如：每次鼠標懸停並檢查是否在無序列表中打印文本，然後在下次單擊時刪除元素。 Jquery

 $('h1').hover(function(){ 
       //alert('test toggle'); 
       remove_el(); 
       for(var i=0;i<5;i++){ 
       $('ul').append('<li>'+'END_check else'+i+'</li>').toggle(); 

       } 
       } 

       ); 

      function remove_el(){ 

       $('li').remove(); 
      };