jQuery wrapAllメソッドでまとめて要素で囲むサンプル

2022年10月18日

環境
jQuery 3.6.0
Windows 10 Home 64bit

構文
1.$(セレクター名).wrapAll(要素タグ).text(値);
wrapAllメソッドでまとめる形で要素タグを追加します。
2.$(セレクター名).unwrap().text(値);
unwrapメソッドで指定の要素の親の要素を削除します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
.td {
  color:green;
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
     $("#btnchg").click(function() {
         const tA = $(".ta").text();
        
            if(tA[0] === "黒" ){
       　  /* wrapAllメソッドでまとめる*/
                  $(".ta").wrapAll("<div class='td'></div>").text("緑");
            }else{
           //unwrapメソッドで指定の要素
            $(".ta").unwrap().text("黒");
            }
      });
});
</script>
</head>
<body>

<p class="ta">黒</p>
<p class="ta">黒</p>
<input type="button" id="btnchg" value="変更">

</body>
</html>

実行結果
「変更」ボタンを押すと、wrapAllメソッドでまとめる形でdivタグを追加します。
<div class="td"><p class="ta">緑</p><p class="ta">緑</p></div>
再度「変更」ボタンを押すと、unwrapメソッドで指定の要素(.ta)の親の要素を削除します。

jQuery

Posted by arkgame

関連記事: