指定したタグの前後にラッピングタグを追加する

Question

最近jQueryのコースを開始し、自分のコードで何がうまくいかないのか疑問に思っています。私は、それぞれの「wcprow」のdivと終了divの後に李を閉じる前に、開口1iを追加したい...だから、次のようになります。

<li> 
<div class="wcprow"> 
    Content 
</div> 
</li> 

私の現在のHTMLは

<ul> 

<div class="wcprow"> 
    Content 
</div> 

<div class="wcprow"> 
    Content 
</div> 

<div class="wcprow"> 
    Content 
</div> 

</ul> 

とjQueryであります：

$('.wcprow').before("<li>"); $('.wcprow').after("</li>"); 

Fiddle Here

私はdevのツールを経由して表示すると、それは閉鎖を出力li。それは私が望むものではありません。

<li></li><div class="wcprow"> 
    Content 
</div> 

私はこのコースの開始時だと後で答えにつまずくかもしれない...しかし、私はあまりそれについて考えていないよので、誰もが私に任意のポインタを与えることができるかどうか疑問に思いました。

Answer 1

.before()と.after()の仕組みを誤解しています。あなたがやったようにあなたはそれを呼び出す場合：

$('.wcprow').before('<li>'); 

これは、新しい要素を作成します（document.createElement('li')と思う）、それが右の.wcprow前にこの完全なノードを挿入します。開始タグまたは終了タグを挿入するだけではありません。

let e = document.createElement('li'); 
$('.wcprow').before(e); 

あなたがしたいのは、要素を別の要素にラップすることです。したがって、あなたは.wrap()を探しています：

一致する要素のセット内の各要素の周りにHTML構造をラップします。

それは、このような単純なのです：

$('.wcprow').wrap('<li></li>'); 

さらに

• jQuery .wrap()
• jQuery .before()
• jQuery .after()
を読みます

デモ

Try before buy

注

無効なHTMLで始まります。 divは、ul|ol要素の子にすることはできません。後でli -elementsにコンテナをラップすることでこれを「修復」するつもりはありますが、コードは最初からそのままでなければなりません。