Question

var p = '<p>This is a paragraph.</p>'

var x = $(p).wrap('<a></a>');

console.log(x);

我希望它会返回'<a><p>This is a paragraph.</p></a>'，但为什么它不会？尝试wrapInner（）它也不起作用。

Answer 1

当你调用.wrap()时，它将返回被调用的元素，在本例中是p元素，但是当你包装一个新的anchor元素时，它会被创建并且它是p的父级。因此，您可以致电.parent()以获取对新anchor元素的引用。

要打印新的html，您可以获得新元素的outerHTML。

var p = '<p>This is a paragraph.</p>'

var x = $(p).wrap('<a></a>').parent();

snippet.log(x[0].outerHTML);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

另一种选择是创建anchor元素，然后将p指定为其内容，如

var p = '<p>This is a paragraph.</p>'

var x = $('<a></a>', {
  html: p
});

snippet.log(x[0].outerHTML);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

尝试交换选择器，例如

var x = $('<a></a>').wrap(p);

＆＃13;

var p = '<p>This is a paragraph.</p>';
var x = $('<a></a>').wrap(p);
console.log(x);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

即使它也是html，你也无法包装普通字符串。

如果它是dom元素，那么只有你可以使用wrap并且它将起作用..

Answer 4

使用此代码将解决您的问题。

    $(function(){
      $('body').find('p').wrap("<a></a>");
    });

使用wrap（）包装原始html

4 个答案: