jquery - jQuerywrapAllが期待どおりに動作しない

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はユーザーが生成したテンプレートからオンザフライで生成され、ラッパーは個別に提供されます。内部値をラップするにはどうすればよいですか？

score 9 · Accepted Answer

wrapAll新しいオブジェクトではなく、元のjQueryオブジェクトを返します。つまり、 swrapAllを返します。これは、呼び出され<li>たオブジェクトだからです。wrapAll

これを試して：

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

score 3 · Accepted Answer

これはwrapAll、ラッパーを返すのではなく、ラッパーが適用された元のオブジェクトを返すために発生します（ほとんどのjquery関数と同様）。

を使用.parent()してul要素にアクセスします。

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

score 2 · Accepted Answer

でのみ可能.append()です。

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

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

3 に答える 3