.wrap（）

Question

考虑以下HTML：

<div>
    aaaa
    <span>bbbb</span>
    cccc
    <span>dddd</span>
    eeee
</div>

我按照answers in this question使用JQuery来匹配[aaaa, cccc, eeee]文本节点：

$('div').contents().filter(function()
{
    return this.nodeType === 3;
});

现在，我想用HTML元素替换每个文本节点 - 比如包含文本节点的<div>。这是我想要的结果：

<div>
    <div>aaaa</div>
    <span>bbbb</span>
    <div>cccc</div>
    <span>dddd</span>
    <div>eeee</div>
</div>

我尝试使用传递给.each的各种闭包。 E.g：

$('div').contents().filter(function()
{
    return this.nodeType === 3;
}).each(function()
{
    this.html("<div>" + this.text() + "</div>");
});

但似乎文本节点不提供任何.html方法。 如何使用JQuery将文本节点替换为任意HTML元素？

Answer 1

this指的是一个简单的DOM节点元素，它既不实现html()也不实现text()方法。使用$(this)，您可以将元素转换为jQuery集合，以便能够访问jQuery方法。然后，您可以使用replaceWith()将纯文本节点替换为<div>。

＆＃13;

$('div').contents().filter(function()
{
    return this.nodeType === 3;
}).each(function()
{
    $(this).replaceWith("<div>" + $(this).text() + "</div>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    aaaa
    <span>bbbb</span>
    cccc
    <span>dddd</span>
    eeee
</div>

＆＃13;

Answer 2

您还可以使用jquery中的wrap将内容包装为div

.wrap（）

描述：围绕匹配元素集中的每个元素包装HTML结构。

参考：http://api.jquery.com/wrap/

＆＃13;

$('div').contents().filter(function()
{
    return this.nodeType === 3;
}).each(function()
{
    $(this).wrap('<div>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    aaaa
    <span>bbbb</span>
    cccc
    <span>dddd</span>
    eeee
</div>

＆＃13;

使用JQuery将文本节点转换为HTML元素

2 个答案:

.wrap（）