【jQuery】wrapAll()で対象の要素を指定した要素でまとめて囲む!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年09月28日に投稿されました。)

jQueryで対象の要素を指定した要素で囲む方法としてwrapAll()があります。


wrapAll()とは対象の要素を指定した要素でまとめて囲むメソッドであり、対象の要素をまとめて指定した1つの要素でラッピングするようになります。

順番に並んでいてもいなくても関係なく、指定した要素でまとめてラッピングを行います。

また、wrapAll()は階層関係なく、対象の要素をソートし、それらの要素を1つの要素でラッピングするようになります。

ラッピングする要素に属性を付与することでラッピングした全ての要素のスタイルを変更できるため、「対象の要素たちを1つの要素にまとめたい」と思った場合はwrapAll()を使用しましょう。

今回はjQueryのwrapAll()で対象の要素を指定した要素でまとめて囲む方法について紹介していきます。

この記事はこんな方におすすめ

対象の要素を指定した要素でまとめて囲みたい場合

wrapAll()とは

wrapAll()とはになります。

そのため、指定したノードたちの親ノードとして追加されるようになります。

wrapAll()の書き方

wrapAllの書き方は下記のようになります。

セレクタの後ろにwrapAll()と追記し、必須の引数を1つ指定して使用します。

また、下記のように記載してもwrapAll()を使用することができます。

セレクタの後ろにwrapAll()と追記し、こちらも必須の引数を1つ指定して使用します。

wrapAll()の引数

wrapAll()の引数は下記のようになります。

  1. ラッピングする要素:(必須)
    対象の要素をまとめてラッピングするための要素を文字列で指定する
  2. コールバック関数:(必須)
    対象要素をまとめて囲む前の処理を関数で指定する。

wrapAll()は必須な引数として「ラッピングする要素」を指定します。

また、必須な引数として「コールバック関数」を指定します。

wrapAll()の返り値

wrapAll()の返り値は、囲んだ要素の情報が記載されたjQueryオブジェクトになります。

wrapAll()で対象の要素を指定した要素でまとめて囲むサンプルコード

wrapAll()で対象の要素を指定した要素でまとめて囲むサンプルコードをご紹介します。

ここでは、下記の2つのパターンでwrapAll()を使用します。

  1. 対象の要素のみが並んでいる場合
  2. 対象の要素と他の要素が並んでいる場合

対象の要素のみが並んでいる場合

対象の要素のみが並んでいる場合にwrapAll()を使用すると、対象の要素全てを指定した要素で囲むようになります。

● index.html

● style.css

● main.js

実行結果

対象の要素のみが並んでいる場合にwrapAll()で指定した要素でまとめて囲んだ結果

実行結果(ソースコード)

対象の要素のみが並んでいる場合にwrapAll()で指定した要素でまとめて囲んだ結果のソースコード

wrapAll()で対象の要素を指定した要素でまとめて囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素たちがまとめて水色の要素でラッピングしています。

また、ソースコードを見ると「obj」クラスの要素と「dummy」クラス内にある「obj」クラスの要素がまとめて「obj-area」クラスの要素にラッピングされています。

対象の要素と他の要素が並んでいる場合

対象の要素と他の要素が並んでいる場合にwrapAll()を使用すると、こちらも対象の要素全てを指定した要素でまとめて囲むようになります。

まとめて囲むため、並び順が対象の要素と他の要素でソートされるようになります。

● index.html

● style.css

● main.js

実行結果

対象の要素と他の要素が並んでいる場合にwrapAll()で指定した要素でまとめて囲んだ結果

実行結果(ソースコード)

対象の要素と他の要素が並んでいる場合にwrapAll()で指定した要素でまとめて囲んだ結果のソースコード

wrapAll()で対象の要素を指定した要素でまとめて囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素だけがまとめて赤色の要素でラッピングしています。

また、ソースコードを見ると「obj」クラスの要素と「dummy」クラス内にある「obj」クラスの要素がまとめて「obj-area」クラスの要素にラッピングされています。

wrapAll()で違う階層の対象の要素を指定した要素でまとめて囲む場合

違う階層の対象の要素を指定した要素でまとめて囲む場合にwrapAll()を使用すると、指定した要素でまとめて囲むようになります。

そのため、親要素や子要素の階層は関係なく指定した要素でラッピングを行います。

● index.html

● style.css

● main.js

実行結果

wrapAll()で違う階層の対象の要素を指定した要素でまとめて囲んだ結果

実行結果

wrapAll()で違う階層の対象の要素を指定した要素でまとめて囲んだ結果のサンプルコード

wrapAll()によって違う階層の対象の要素を指定した要素でまとめて囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素たちがまとめて緑色の要素でラッピングしています。

また、ソースコードを見ると「obj」クラスの要素と「dummy」クラス内にある「obj」クラスの要素がまとめて「obj-area」クラスの要素にラッピングされています。

コールバック関数を指定してwrapAll()で対象の要素を指定した要素でまとめて囲むサンプルコード

コールバック関数を指定してwrapAll()で対象の要素を指定した要素でまとめて囲むサンプルコードをご紹介します。

コールバック関数を使用することで、ラッピングする前に何かしらの処理を設定することができます。

● index.html

● style.css

● main.js

実行結果

コールバック関数を指定してwrapAll()で対象の要素を指定した要素でまとめて囲んだ結果

実行結果(ソースコード)

コールバック関数を指定してwrapAll()で対象の要素を指定した要素でまとめて囲んだ結果のサンプルコード

wrapAll()でコールバック関数を使用して対象の要素を指定した要素でまとめて囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素だけ色が変化し、黄緑色の要素でまとめてラッピングしています。

また、ソースコードを確認すると、「obj」クラスの要素がまとめて「obj-area」クラスの要素にラッピングされています。

wrapAll()で対象の要素に別の処理を行って指定した要素でまとめて囲む場合

wrapAll()で対象の要素に別の処理を行って指定した要素でまとめて囲むには、each()を使用します。

each()とはjQueryオブジェクトに対して繰り返し処理を行うメソッドになります。

そのため、wrapAll()のコールバック関数内でeach()を使用することで、対象の要素にそれぞれ別の処理を行い、指定した要素でまとめて囲むことができます。

● index.html

● style.css

● main.js

実行結果

wrapAll()で対象の要素に別の処理を行って指定した要素でまとめて囲んだ結果

実行結果(ソースコード)

wrapAll()で対象の要素に別の処理を行って指定した要素でまとめて囲んだ結果のサンプルコード

wrapAll()で対象の要素を指定した要素でまとめて囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素の色がそれぞれ違う色に変化し、水色の要素でまとめてラッピングしています。

また、ソースコードを確認すると、「obj」クラスの要素がまとめて「obj-area」クラスの要素にラッピングされています。

wrapAll()を使用した実際のケース

wrapAll()を使用した実際のケースについてご紹介します。

例えばwrapAll()を使用して、日付が過ぎた要素をまとめて非表示にするようなコードを作成します。

● index.html

● style.css

● main.js

実行結果-1

wrapAll()で日付が過ぎた要素をまとめて非表示にした結果(月日)

実行結果-2

wrapAll()で日付が過ぎた要素をまとめて非表示にした結果(年月日)

wrapAll()で日付が過ぎた要素をまとめて非表示にしています。

この画面は「2023年9月28日」であるため、年を2023年に設定すると「9月から12月」までしか表示されておらず、9月は「28日〜31日」までしか表示されません。

また、年を2023年以降に設定すると、「1月から12月」まで表示され、「1日から31日」まで表示されます。

JavaScriptで対象の要素を指定した要素でまとめて囲む場合

Javascriptで対象の要素を指定した要素でまとめて囲む場合には複数のメソッドを組み合わせることで実装することができます。

● index.html

● style.css

● main.js

実行結果

JavaScriptで対象の要素を指定した要素でまとめて囲んだ結果

実行結果(ソースコード)

JavaScriptで対象の要素を指定した要素でまとめて囲んだ結果のソースコード

JavaScript()で対象の要素を指定した要素でまとめて囲んでいます。

ラッピングする要素をcreateElement()で作成してinsertBefore()で追加し、作成した要素に対して「obj」クラスの要素をappnedChild()で追加しています。

そのため、「ラップ」ボタンをクリックすると対象の要素たちがピンク色の要素でまとめてラッピングしています。

また、ソースコードを確認すると、「obj」クラスの要素がまとめて「obj-area」クラスの要素にラッピングされています。

もし、今回使用したメソッドについて詳しく知りたい場合は下記の記事をご参考ください。

● createElement()

● appendChild()

● insertBefore()

対象の要素を指定した要素で囲むメソッド

jQueryでwrapAll()のように対象の要素を指定した要素で囲むメソッドは他にも存在します。

そのため、ここではjQueryで対象の要素を指定した要素で囲むメソッドについてご紹介します。

対象の要素を指定した要素で囲む:wrap()

wrap()とは、対象の要素を指定した要素で囲むメソッドになります。

対象の要素それぞれに対して指定した要素で囲むようになります。

● index.html

● style.css

● main.js

実行結果

wrap()で対象の要素を指定した要素で囲んだ結果

実行結果(ソースコード)

wrap()で対象の要素を指定した要素で囲んだ結果のソースコード

wrap()で対象の要素を指定した要素で囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素がオレンジ色の要素でそれぞれラッピングしています。

また、ソースコードを見ると「obj」クラスの要素が「obj-area」クラスの要素でそれぞれラッピングされています。

もし、wrap()について詳しく知りたい場合は下記の記事をご参考ください。

対象の要素の子要素をまとめて囲む:wrapInner()

wrapInnner()とは対象の要素の子要素を指定た要素でまとめて囲むメソッドになります。

指定したセレクターに含まれている子要素を指定した要素でまとめてラッピング

● index.html

● style.css

● main.js

実行結果

wrapInner()で対象の要素の子要素をまとめて囲んだ結果

実行結果(ソースコード)

wrapInner()で対象の要素の子要素をまとめて囲んだ結果のサンプルコード

wrapInnner()で対象の要素の子要素を指定た要素でまとめて囲んでいます。

そのため、「ラップ」ボタンをクリックすると対象の要素の子要素が緑色の要素でそれぞれラッピングしています。

また、ソースコードを見ると「obj」クラスの子要素が「obj-area」クラスの要素でラッピングされています。

まとめ

⚫︎ wrapAll()とは対象の要素を指定した要素でまとめて囲む(ラッピング)するメソッドである。

⚫︎ wrapAll()は下記の引数を指定して使用する
・ラッピングする要素(必須)

⚫︎ 対象の要素のみが並んでいる場合にwrapAll()を使用すると、対象の要素全てを指定した要素で囲む。

⚫︎ 対象の要素と他の要素が並んでいる場合にwrapAll()を使用すると、こちらも対象の要素全てを指定した要素でまとめて囲む。

⚫︎ 違う階層の対象の要素を指定した要素でまとめて囲む場合にwrapAll()を使用すると、親要素や子要素の階層は関係なく指定した要素で囲む。

⚫︎ wrapAll()で引数を設定しないでコールバック関数を指定すると、何かしらの処理を行った後に指定した要素でまとめて囲む。

⚫︎ wrapAll()で対象の要素に別の処理を行って指定した要素でまとめて囲むには、each()と組み合わせて使用する。

⚫︎ Javascriptで対象の要素を指定した要素でまとめて囲む場合には複数のメソッドを組み合わせることで実装できる。

⚫︎ 対象の要素を指定した要素で囲むメソッドは他にも下記のようなメソッドがある
・wrap()
(対象の要素を指定した要素で囲む)
・wrapInner()
(対象の要素の子要素をまとめて囲むメソッド)