「jQuery」wrapAllメソッドで指定要素にタグを囲む

2014年2月8日2021年11月26日

環境
jQuery 3.5.1

書式
$(“セレクタ名").wrapAll(“<div class=’セレクタ名’></div>")
$(“セレクタ名").unwrap().text(文字列)

使用例

<!--cssの定義 -->
<style>.kk{color:red;}</style>

<p class="cft">Abc</p>
<p class="cft">Ade</p>

<input type="button" id="btnWrap" value="検証">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  //ボタンを押す
      $("#btnWrap").click(function() {
            const kd = $(".cft").text();
            if(kd[0] === "A" ){
        //wrapAllメソッドで個別に引数の要素
                  $(".cft").wrapAll("<div class='kk'></div>")
                        .text("BBC");
            }else{
        //unwrapメソッドで指定の要素 
                  $(".cft").unwrap()
                        .text("Abc");
            }
      });

</script>

動作確認
1.「テスト」ボタンを押すと、wrapAllメソッドでセレクタ名「cft」にdivタグを追加します
2.再度「テスト」ボタンを押すと、指定要素cftの親の要素を削除します