使用 jQuery 重新定位/移动 div

Question

我从按以下方式排列的div开始。两个div，main-top和main-bottom开始是隐藏的，我希望它们在移动到正确的位置后出现。我想移动main-top显示在header之后，并将main-bottom移动到footer之前，并在移动它们后显示div。你如何使用jQuery移动这些div？最终顺序应为header、main-top、main-bottom、footer

<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
<style>
#main-top {display: none;}
#main-bottom {display: none;}
<style>
<script>
//*Move 'main-top' to appear after 'header'*
$('#main-top').show(); // Show div after it's moved
//*Move 'main-bottom' to appear before 'footer'*
$('#main-bottom').show(); // Show div after it's moved
</script>

Answer 1

您可以使用insertBefore和insertAfter功能

$('#main-top').insertAfter('#header').show();
$('#main-bottom').insertBefore('#footer').show();

#main-top {display: none;}
#main-bottom {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

Answer 2

这个问题可以通过几种方式解决，一种方式 - 有警告 - 使用CSS(使用CSS flex-box或Grid布局)，另一种使用JavaScript/jQuery。

首先，使用 CSS flexbox：

/* we use flexbox layout on the element which
contains the elements you wish to rearrange,
which causes them to become flex-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: flex;
flex-direction: column;
}
/* here we select the elements and use the
'order' property with a numerical value
to place them in the correct order within
their parent element:  */
#header {
order: 1;
}
#main-top {
order: 2;
}
#main-bottom {
order: 3;
}
#footer {
order: 4;
}

<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

并且，使用 CSS 网格：

/* we use grid layout on the element which
contains the elements you wish to rearrange,
which causes them to become grid-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: grid;
grid-auto-flow: row;
}
/* here we select the elements and use the
'order' property with a numerical value
to place them in the correct order within
their parent element:  */
#header {
order: 1;
}
#main-top {
order: 2;
}
#main-bottom {
order: 3;
}
#footer {
order: 4;
}

<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

还有第三种CSS方法，同样使用CSS Grid布局，但利用grid-template-areas和grid-area属性：

/* we use flexbox layout on the element which
contains the elements you wish to rearrange,
which causes them to become flex-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: grid;
/* here we name several grid areas; each quoted string
names the areas in that row, here we have four named
rows and each row has only one column: */
grid-template-areas:
"header"
"main-top"
"main-bottom"
"footer";
}
/* here we select the elements and use the
'grid-area' property to place them each
in the correct grid-area: */
#header {
grid-area: header;
}
#main-top {
grid-area: main-top;
}
#main-bottom {
grid-area: main-bottom;
}
#footer {
grid-area: footer;
}

<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

这些方法的警告是，它们只影响视觉呈现;DOM 保持不变，定位的元素 - 无论是使用order还是grid-area- 对于使用替代消费方式(如屏幕阅读器)的用户保持其原始顺序。

使用本机 JavaScript，它确实修改了 DOM 顺序：

// we retrieve, and cache, the <div id="header"> element,
// and then its parentNode:
const header = document.getElementById('header'),
parent = header.parentNode;
// here we use the parentNode.insertBefore() method to
// place the 'header' before the 'parent' Node's
// first-child:
parent.insertBefore(header, parent.firstChild);

#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}

<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

这在功能上等同于您的请求，但是您的问题专门询问：

1. 将#main-top元素移动到#header元素之后，以及
2. 将#main-bottom元素移动到#footer元素之前。

考虑到这一点，如果您确实希望移动两个元素而不仅仅是一个元素，那么以下内容应该满足您对要放置的元素的需求：

// retrieving and caching all elements using destructuring assigment:
const [parent, mainTop, mainBottom, header, footer] = document.querySelectorAll('div');
parent.insertBefore(mainTop, header.nextSibling);
parent.insertBefore(mainBottom, footer);

#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}

<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

最后，当然，如果你愿意，可以使用jQuery：

$('#header').after($('#main-top'));
$('#footer').before($('#footer'));

#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>