jquery - jQuery wrapAll 没有按预期运行

Question

我正在尝试用另一个元素包装一系列动态创建的元素，例如：

var innerHtmlAsText = "<li>test1</li><li>test2</li>";
var wrapper = "<ul />";

$("div#target").append($(innerHtmlAsText).wrapAll(wrapper));

我的预期结果是

<ul>
    <li>test1</li>
    <li>test2</li>
</ul>

但实际结果是：

<li>test1</li>
<li>test2</li>

li元素未包装。在我的实例中，innerHtml 是从用户生成的模板动态生成的，并且包装器是单独提供的。如何包装内部值？

Answer 1

wrapAll返回原始的 jQuery 对象，而不是新的。所以，wrapAll返回<li>s，因为那是wrapAll被调用的对象。

尝试这个：

$("div#target").append($(innerHtmlAsText).wrapAll(wrapper).parent());

Answer 2

发生这种情况是因为wrapAll不返回包装器，而是应用它的原始对象（与大多数 jquery 函数一样）。

使用.parent()来获取ul元素..

$("div#target").append( $(innerHtmlAsText).wrapAll(wrapper).parent() );

Answer 3

也可以仅使用.append().

var innerHtmlAsText = "<li>test1</li><li>test2</li>";
var wrapper = "<ul/>";

$("div#target").append($(wrapper).append(innerHtmlAsText));

演示