Question

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

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

program.sh "file1 file2 file3" 1

用户可以通过单击按钮来隐藏div（该按钮会触发将div.tile:nth-child(4n-7) .text { background-color: yellow; }规则添加到所选div中的display: none属性的jQuery函数。）

的jQuery

class

CSS

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

以下是问题所在：

即使.hidden { display: none; }从屏幕中删除div，它也不会从DOM中删除div，因此display: none选择器在应用样式时仍然会对其进行计数，这反过来会让人感到烦恼网格的视觉设计。

上述布局已中断，因为只有第一列应为黄色。

所以我的第一个想法是使用jQuery remove() method，它将元素（及其后代）从DOM中删除。

然而，事实证明，一旦nth-child被应用，您就无法获得这些div。他们走了。因此，切换功能会中断。

经过一些研究后，我发现了jQuery detach() method，它与remove()做同样的事情，除了它存储被删除的元素＆＃39;数据供以后使用。

来自jQuery website：

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

.detach()使用切换开关的一切看起来都不错，但我实施它的努力并不起作用。

我已经使用example on the jQuery website作为指南，但它并没有在网格上工作。我也阅读了这个网站上的各种相关帖子，但无济于事。我一定错过了什么。

非常感谢任何反馈。

http://jsfiddle.net/tfyfpbb2/

＆＃13;

detach()

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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/

如果是这样，您只需要添加三个行而不是一个。这样每行都有自己的空间＆＃34;并且不会错过下一排的造型。

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

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

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

4 个答案: