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

Question

我有一組排列在網格中的div。

為了設置每個div的樣式，我使用nth-child() 偽類選擇它們。

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

用戶可以通過單擊按鈕來隱藏div（它會觸發一個jQuery函數，該函數將display: none規則添加到所選div中的class屬性）。

jQuery的

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

CSS

.hidden { display: none; }

這是問題所在：

即使display: none從屏幕中刪除了div，它也不會從DOM中刪除div，因此第nth-child選擇器在應用樣式時仍然會計算它，這反過來會混淆網格的視覺設計。

上面的布局被破壞了，因為只有第一列應該是黃色的。

所以我的第一個想法是使用jQuery remove()方法 ，它將元素（及其后代）從DOM中取出。

然而，事實證明，一旦應用了remove() ，你就無法獲得這些div。 他們走了。 因此切換功能會中斷。

經過一些研究后，我發現了jQuery detach()方法 ，該方法與.remove()相同的操作，除了它存儲已刪除元素的數據供以后使用。

來自jQuery網站 ：

.detach()方法與.remove()相同，除了.detach()保留與刪除的元素關聯的所有jQuery數據。 當刪除的元素稍后要重新插入DOM時，此方法很有用。

對於使用切換開關工作， detach()一切看起來都很好，除了我實現它的努力不起作用。

我在jQuery網站上使用了這個例子作為指南，但它不適用於網格。 我也閱讀了這個網站上的各種相關帖子，但無濟於事。 我肯定錯過了什么。

任何反饋都將非常感激。

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

我建議仍然使用分離。 您可以使用以下代碼執行此操作：

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

每個人都很親密，但這正是您正在尋找的當前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 3

我使用了remove（）和切換來刪除和刪除元素。 示例：每次鼠標懸停並檢查文本是否以無序列表打印，然后在下次單擊時刪除元素。 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();
            };

Answer 4

我不太確定你是否願意這樣做 - 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> 

希望有所幫助！ 如果那不是您想要的，請告訴我，我可以編輯我的答案。