「jQuery」wrapAllメソッドで指定要素にタグを囲む
環境
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の親の要素を削除します