Jquery 将所有正文元素插入 <Main> 标记答案

【问题标题】：Jquery to insert all body elements into a <Main> tagJquery 将所有正文元素插入 <Main> 标记
【发布时间】：2022-10-17 21:20:28
【问题描述】：

我对 Jquery 一无所知，非常感谢一些帮助或指导。

我希望将标签内的所有标签插入单个标签以实现可访问性。

有问题的网站是在 CMS（Sitefinity 14.2）内构建的，其中所有 HTML 都在标签内。请参阅下面的屏幕截图。我需要排除所有脚本，并且只在主标签中插入页眉和页脚标签之间的标签。

目前它看起来像这样：

<head></head>
<body>
  <script>
  <script>
  <header>
  <div>
  <div>
  <div>
  <footer>
  <script>
  <script>
</body>

而我的目标是让它看起来像这样：

<head></head>
<body>
  <script>
  <script>
  <header>
    <main>
      <div>
      <div>
      <div>
     </main>
  <footer>
  <script>
  <script>
</body>

下面是 HTML 的屏幕截图。

提前感谢您的任何帮助或建议！

Raw HTML from Home page.

【问题讨论】：

标签： html jquery accessibility

【解决方案1】：

$('div:not(header *,footer *)').wrapAll('&lt;main&gt;')

header {
height: 100px;
background-color: yellow
}

footer {
height: 100px;
background-color: green
}

main {
height: 150px;
background-color: blue
}

main .child-div {
background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div>
<h2>Header is not included in main, it's yellow</h2>
</div>
</header>
<div class="child-div">Main Div 1, Main is blue, But .child-div class is red</div>
<div>Main Div 2, Main is blue</div>
<div>Main Div 3, Main is blue</div>
<footer><div>
<h2>Header is not included in main, it's green</h2>
</div></footer>

解释

除了@j08691，如果您只想包含尚未被 or 包裹的 div，请使用 CSS selector :not() 与 jQuery 组合。基本关于:not()W3School。

既然你必须选择不是 (!) header 或 footer 的子/后代的 divW3School 只为您提供了一些基本知识，我想进一步解释一下。

/* Select elements that are
   not paragraphs */
:not(p) { /* ... */ }

/* Select paragraphs that
   don't have the class "fancy" */
p:not(.fancy) { /* ... */ }

/* Select elements that are
   not p or span */
:not(p):not(span) { /* ... */ }

/* Select elements that are
   not p or span */
:not(p, span) { /* ... */ }

深入了解Specification of CSS Selector，您会发现可以使用通用选择器(*) 选择不是（！）其他元素的子/后代的元素。这会给你结果div:not(header *,footer *)

【讨论】：

还有一件事@Bao。该脚本似乎替换了每个 div，然后依次删除所有类。有没有办法完全不改变课程？而是创建一个新元素并将每个 div 放入其中而不覆盖父 div？谢谢。我现在正在处理它，但似乎真的找不到正确的方法。
我不太明白你的担心。我刚刚更新了代码，运行它，你可以看到类 .child-div 仍然存在，并将背景更改为另一种颜色

【解决方案2】：

$('div').wrapAll('<main>') 会这样做：

$('div').wrapAll('&lt;main&gt;')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header></header>
<div></div>
<div></div>
<div></div>
<footer></footer>

文档：https://api.jquery.com/wrapall/

【讨论】：

它包含所有内容，但我只想包含尚未被 <header> 或 <footer> 标签包装的 div，然后将其存储在两者之间。
我正在尝试使用您共享的链接中的一种方法，但似乎无法获得它。 ("div").wrapAll(document.createElement("main"));只是不断地误会我