如何使用 jQuery detach() 方法切换元素进出 DOM？

Question

我有一组按网格排列的 div。

要设置每个 div 的样式，我使用 nth-child() pseudo-class 选择它们。

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() 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

我建议仍然使用分离。您可以使用以下代码执行此操作：

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> 

希望对您有所帮助！如果这不是您想要的，请告诉我，我可以编辑我的答案。