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>，因为这是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));

<强> DEMO