如何使用jQuery detach（）方法来切换元素进出DOM？ [英] How to toggle elements in and out of DOM using jQuery detach() method?
问题描述
我有一组在网格中排列的div。
要为每个div设置样式，请使用
上述布局被破坏，因为只有第一列应为黄色。
所以我的第一个想法是使用jQuery remove ）方法，它将元素（及其后代）从DOM中移除。
然而， c $ c> remove（）被应用，你不能得到那些div。他们走了。
经过一番研究，我发现了jQuery .remove（） ，除了它存储被移除的元素的数据供以后使用。
从 jQuery网站：
.detach（）方法与除了当以后将删除的元素
.detach（）保留所有与移除的
元素相关联的jQuery数据，.remove（）
重新插入DOM时，此方法很有用。
detach（）以使用切换开关，但我努力实现它不工作。
我们使用 jQuery网站上的示例作为指南，但它在网格上不起作用。我也读过这个网站上的各种相关的帖子，但无济于事。我必须缺少一些东西。
任何反馈都将非常感激。
$（'。hide-divs'）click（function（）{$（'。dolphin'）。toggleClass（'hidden'）;}） code>
.row {display：flex; flex-wrap：wrap; width：500px; padding：0; margin：0;}。text {height：50px; width：100px; margin：10px; padding-top：15px;背景：番茄; color：#fff; text-align：center; font-size：2em;}。tile：nth-child（4n-7）.text {border：2px solid #ccc;背景颜色：黄色; color：＃000;} button {padding：10px;背景颜色：lightblue;位置：相对; 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 =buttonclass =hide-divs> HIDE DIVS 3，6& amp; 8< / button>
p>我建议还是使用detach。您可以使用此代码执行此操作：
var divs;
$（'。hide-divs'）。on（'click'，function（）{
if（divs）{
$（divs）.appendTo（'。 row'）;
divs = null;
} else {
divs = $（'。dolphin'）。parent（）。detach（）;
}
}）;
然后为了确保使用相同的顺序，我想出了这一段代码： p>
$（'。tile'）每个函数（i）{
$（this）.data -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/
I have a group of divs arranged in a grid.
To style each div I'm selecting them with the nth-child() pseudo-class.
div.tile:nth-child(4n-7) .text { background-color: yellow; }
A user can hide divs by clicking on a button (which fires a jQuery function that adds a display: none rule to the class attribute in the selected div).
jQuery
$('.hide-divs').click(function () {
$('.dolphin').toggleClass('hidden');
})
CSS
.hidden { display: none; }
Here's the problem:
Even though display: none removes the div from the screen, it doesn't remove the div from the DOM, so the nth-child selector still counts it when applying styles, which in turn messes up the visual design of the grid.
The above layout is broken because only the first column should be yellow.
So my first thought was to use the jQuery remove() method, which takes elements (and its descendants) out of the DOM.
Turns out, however, once remove() is applied you can't get those divs back. They're gone. So the toggle function breaks.
After a bit of research I discovered the jQuery detach() method, which does the same thing as .remove(), except it stores the removed elements' data for later use.
From the 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.
Everything looks good for detach() to work with the toggle switch, except my efforts to implement it aren't working.
I've used the example on the jQuery website as a guide but it doesn't work on the grid. I also read various related posts on this site, but to no avail. I must be missing something.
Any feedback would be much appreciated.
$('.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 & 8</button>
I suggest still using detach. You can do so with this code:
var divs;
$('.hide-divs').on('click', function () {
if(divs) {
$(divs).appendTo('.row');
divs = null;
} else {
divs = $('.dolphin').parent().detach();
}
});
Then to ensure that the same order is used, I came up with this bit of code:
$('.tile').each(function(i){
$(this).data('initial-index', i);
});
...
$(divs).each(function(){
var oldIndex = $(this).data('initial-index');
$('.tile').eq(oldIndex).before(this);
});
Put it all together and we get this code:
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();
}
});
Demo on jsfiddle: http://jsfiddle.net/tqbzff2v/2/
这篇关于如何使用jQuery detach（）方法来切换元素进出DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
