JQuery の DOM ラップ方法 nodes_jquery

この記事の例では、JQuery を使用して DOM ノードをラップする方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

他のタグでノードをラップしたい場合、JQuery は対応するメソッド、wrap() を提供します。これは、追加の構造化タグをドキュメントに挿入するのに非常に便利で、元のドキュメントのセマンティクスを破壊しません。

wrap()

コードをコピー コードは次のとおりです:

$("#li_1").wrap("< ;strong>128dba7a3a77be0113eb0bea6ea0a5d0");

得られた結果は次のとおりです:

<strong>
  <li id="li_1" title="PHP编程">简单易懂的PHP编程</li>
</strong>

ノード操作をラップするには他にも 2 つのメソッド、wrapAll() と WrapInner() があります。

wrapAll() メソッド

このメソッドは、一致するすべての要素を 1 つの要素でラップします。すべての要素を個別にラップする Wrap() メソッドとは異なります。 JQuery コードは次のとおりです:

コードをコピー コードは次のとおりです。

$(".li_2").wrapAll("8e99a69fbe029cd4e2b854e244eab143 46a46b1bf7189f7dc89d7e886f8d0676");

wrapAll() メソッドを使用してラップされた HTML は次のようになります:

<strong>
  <li class="li_2" title="C编程">简单易懂的C编程</li>
  <li class="li_2" title="JavaScript编程">简单易懂的JavaScript编程</li>
</strong>

wrapInner() メソッド

このメソッドは、一致する各要素のサブコンテンツ (テキスト ノードを含む) を他の構造化マークアップでラップします。

コードをコピー コードは次のとおりです。

$("#li_4").wrapInner("8e99a69fbe029cd4e2b854e244eab143 46a46b1bf7189f7dc89d7e886f8d0676");

コードを実行すると、8e99a69fbe029cd4e2b854e244eab143 タグ内のコンテンツが 2 つの 25edfb22a4f469ecb59f1190150159c6 タグで囲まれていることがわかりました。

<li id="li_4" title="JQuery">
  <strong>简单易懂的JQuery编程</strong>
</li>

この例の JQuery コードは次のとおりです:

<script type="text/javascript">
//<![CDATA[
$(function(){
  $("#btn_1").click(function(){
    //用<strong>元素把<li>元素包裹起来
    $("#li_1").wrap("<strong></strong>");
  })
  $("#btn_2").click(function(){
    $(".li_2").wrapAll("<strong></strong>");
  })
  $("#btn_3").click(function(){
    $("#li_4").wrapInner("<strong></strong>");
  })
});
//]]>
</script>

この記事が皆さんの jQuery プログラミングに役立つことを願っています。