jQuery HTML结构的处理 1.结构的嵌套

最新推荐文章于 2021-06-03 08:42:51 发布

原创最新推荐文章于 2021-06-03 08:42:51 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了jQuery中处理HTML结构嵌套的六个方法：wrap、wrapAll、wrapInner及其对应的HTML和元素参数版本。这些方法用于将元素包围在其他结构中，影响元素的外观和行为。通过示例展示了wrapAll()如何组合分散的匹配元素，并讨论了wrap与wrapAll的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构嵌套与插入不同，插入是将某个元素插入到某个位置，或者在某个元素前后插入某某某。而结构嵌套是将元素用其他的元素外包围或者内包围起来。jQuery 定义了如下六个嵌套结构的方法。

l wrap(html)：把所有匹配的元素分别用指定结构化标签包裹起来。
l wrap(element)：把所有匹配的元素分别用指定元素包裹起来。
l wrapAll(html)：把所有匹配的元素用一个结构化标签包裹起来。
l wrapAll(element)：把所有匹配的元素用一个元素包裹起来。
l wrapInner(html)：把每一个匹配的元素的子内容（包括文本节点）使用一个 HTML 结构包裹起来。
l wrapInner(element)：把每一个匹配的元素的子内容（包括文本节点）使用元素包裹起来。

例如，对于如下三个超链接文本：

<a href="#">超链接1</a><a href="#">超链接2</a><a href="#">超链接3</a>

如果希望为每个超链接包裹一个<div>标签，则可以使用如下方法：

$("a").wrap("<div></div>");

则最终显示效果的代码结构如下：

<div><a href="#">超链接1</a></div>
<div><a href="#">超链接2</a></div>
<div><a href="#">超链接3</a></div>

如果希望利用页面中现有的元素来包含超链接。例如，如果希望使用超链接底部的列表项元素来包裹超链接文本。

<a href="#">超链接1</a><a href="#">超链接2</a><a href="#">超链接3</a>
<ul>
<li> </li>
</ul>

可以使用如下代码：

$("a").wrap(document.getElementsByTagName("li")[0]);

则所得的结果如下所示：

<li><a href="#">超链接1</a></li>
<li><a href="#">超链接2</a></li>
<li><a href="#">超链接3</a></li>
<ul>
<li> </li>
</ul>

如果再为所有列表项外面包一层列表结构ul 元素，则可以使用如下代码：

$("a").wrap(document.getElementsByTagName("li")[0]);
$("li").wrapAll(document.getElementsByTagName("ul")[0]);

所得结果如下：

<ul>
<li><a href="#">超链接1</a></li>
<li><a href="#">超链接2</a></li>
<li><a href="#">超链接3</a></li>
</ul>
<ul>
<li> </li>
</ul>

如果希望为每个列表项内嵌入一个span 元素，则可以使用如下代码：

$("a").wrap(document.getElementsByTagName("li")[0]);
$("li").wrapAll(document.getElementsByTagName("ul")[0]);
$("li").wrapInner("<span></span>");

所得结果如下：

<ul>
<li><span><a href="#">超链接1</a></span></li>
<li><span><a href="#">超链接2</a></span></li>
<li><span><a href="#">超链接3</a></span></li>
</ul>

<ul>
<li> </li>
</ul>

在用wrapAll()的时候，如果所匹配的项目不再一起，使用命令后会把所有匹配的内容放在一起

link 111 link 211 link 311

变成下面的

link 1link 2link 3

11 11 11

如果包在外围的结构体有样式，将对内部的元素产生影响

wrap 和 wrapAll的区别

http://tianjun309.iteye.com/blog/803183