Question

我有一个HTML结构：

<div class="footer--columns block-group">
  <div class="st--footer-column">
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
  </div>
</div>

我有一个JavaScript代码，将执行以下结果：

    let sts = $(".st--footer-column");

    for (let i of sts) {
        while (i.childElementCount) {
            i.parentNode.appendChild(i.firstElementChild)
        }
        i.parentNode.removeChild(i)
    }

结果：

<div class="footer--columns block-group">
  <div class="footer--column column--menu block">...</div>
  <div class="footer--column column--menu block">...</div>
  <div class="footer--column column--menu block">...</div>
  <div class="footer--column column--menu block">...</div>
</div>

现在，我需要代码，它将使用div st--footer-column将结果转换回第一个代码

Answer 1

您可以改用jQuery的.detach()方法。无需使用for循环遍历div的子代，您只需在分离后将div的{{3}}附加到其parent() 。

文档指出：

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

.st--footer-column{
  background-color: dodgerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="footer--columns block-group">
  <div class="st--footer-column">
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
  </div>
</div>
<button id="detach">
Detach
</button>
<button id="reattach">
Attach
</button>
<script>
let detachedsts, stscontents, stsparent;
$('#detach').click(function(e){
if(!detachedsts){
let sts = $(".st--footer-column");
stsparent = sts.parent();
stscontents = sts.contents();
detachedsts = sts.detach();
stsparent.append(stscontents);
}
});
$('#reattach').click(function(e){
  if(detachedsts){
    detachedsts.append(stscontents)
    stsparent.empty().append(detachedsts);
    detachedsts = null;
  }
});
</script>

用JavaScript恢复我的代码

1 个答案: