jQuery wrapAllメソッドでまとめて要素で囲むサンプル
環境
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)の親の要素を削除します。