ywork2020.com

Title

要素群を親タグで囲む

目次 (INDEX)

wrapAllとは

ここで説明する wrapAll とは次の語句からなるjQueryのメソッドです。
wrap
読み: ラップ
意味: 包む
all
読み: オール
意味: 全て

目次に戻る

wrapAllメソッドの概要

このメソッドは、呼び出し元の要素群を、引数で指定した要素、またはタグで囲みます。

もし、呼び出し元の要素群の各要素を個別にタグで囲みたい場合は、 wrap() を使用してください。

引数にはセレクター、DOMString、要素オブジェクト、jQueryオブジェクト などや 関数の戻り値を指定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

$(Selector).wrapAll(htmlString);
$(Selector).wrapAll(Selector);
$(Selector).wrapAll(Element);
$(Selector).wrapAll(jQuery);
$(Selector).wrapAll(function);

目次に戻る

サンプルコードと実行結果

ここでは、題材として3つの span 要素を配置しています。

サンプルでは、この span 要素群をメソッドの呼び出し元とし、この要素群を div タグで囲みます。

サンプルコード: CSS 
<style>
	div{
		background-color: ##lightpink;
		margin-bottom: 1em;
		padding: 0.5em;
	}
	span{
		display: block;
		background-color: ##lightblue;
		padding: 0.5em;
	}
	input[type="checkbox"]{
		width: 30px;
		height: 30px;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<input type="checkbox">
	< span>Element SPAN< /span>
	< span>Element SPAN< /span>
	< span>Element SPAN< /span>
	<script>...</script>
</body>
  • 06: input type="checkbox" (チェックボックスです。クリックすると script 02 ~ 09 のコードが実行されます。)
  • 07, 08, 09: span (span要素です。ここでは、この要素群がメソッドの呼び出し元になります。チェックボックスにチェックが入ると、この要素群はdiv要素で囲まれます。)
サンプルコード: script 
<script>
	$("input[type='checkbox']").click(function(){
		if($(this).prop("checked") == true){
			$("span").wrapAll("<div>");
		}
		else{
			$("span").unwrap("div");
		}
	});
</script>
  • 02-09: $("input[type='checkbox']").click(function(){処理}) (チェックボックスがクリックされると 処理 を実行します。)
  • 03-08: if($(this).prop("checked") == true){}else{} (チェックボックスがチェックされたら 04行目 のコードが実行されます。チェックを外すと 07 行目のコードが実行されます。)
実行結果:
Element SPAN Element SPAN Element SPAN

目次に戻る