如何使用jQuery detach()方法将元素切入和切出DOM？

Question

我有一组排列在网格中的div.

为每个div设置样式我用伪类选择它们.nth-child()

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

用户可以通过单击按钮来隐藏div(该按钮触发jQuery函数,该函数将display: none规则添加到class所选div中的属性).

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网站:

除了保留与删除的元素关联的所有jQuery数据之外, 该.detach()方法与之相同.当删除的元素稍后要重新插入DOM时,此方法很有用..remove().detach()

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/