javascript - 如何使用 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 :

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

对于 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/