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>
<!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>
<!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)の親の要素を削除します。