概要

ここでは、エディターでのデザイン案作成時、要素をさらに別の要素で囲みたい時に使えるjQueryのメソッドについて記載します。

• 要素に余白を持たせたいけど、他の要素との兼ね合いでうまく表示できない
• 要素を横並びにしたいけど、囲う要素がないのでうまくできない

などといった場合に有効です。

なお、ここに記載しているメソッドの詳細へのリンクは、jQuery公式となり、外部サイトです。Kaizenで利用可能なjQueryのバージョンとは異なるバージョンの説明がされている場合があります。ご注意ください。

有効なjQueryメソッド

jQueryには「.wrap()」や「.wrapAll()」というメソッドがあります。
これは指定した要素を、他の要素で囲うことができます。

例: 下記のようなHTMLを、divで囲いたい場合

<!-- HTML -->
<p class="kaizen">こんにちは。<span class="red">KaizenPlatform</span>です。</p>

jQueryで「.wrap()」を使って、このように記述します。

//JavaScript(jQuery)
$(".kaizen").wrap("<div class='kaizenWrap'></div>");

すると、HTMLはこのようになります。

<!-- HTML -->
<div class="kaizenWrap">
  <p class="kaizen">こんにちは。<span class="red">KaizenPlatform</span>です。</p>
</div>

指定した要素の内側に存在する要素も、一緒に囲われます。
参考: .wrap()

例: 下記のような、入れ子構造ではない複数のHTMLを、全てdivで囲いたい場合

<!-- HTML -->
<h1 class="kaizenHeading">あいさつ</h1>
<p class="kaizen">こんにちは。KaizenPlatformです。</p>
<p class="kaizenLinks">詳しい情報は<a href="https://kaizenplatform.com/">こちら</a>を見てね</p>

jQueryで「.wrapAll()」を使って、このように記述します。

//JavaScript(jQuery)
$(".kaizenHeading, .kaizen, .kaizenLinks").wrapAll("<div class='kaizenWrap'></div>");

すると、HTMLはこのようになります。

<!-- HTML -->
<div class="kaizenWrap">
  <h1 class="kaizenHeading">あいさつ</h1>
  <p class="kaizen">こんにちは。KaizenPlatformです。</p>
  <p class="kaizenLinks">詳しい情報は<a href="https://kaizenplatform.com/">こちら</a>を見てね</p>
</div>

参考: .wrapAll()

注意点

「.wrap()」も「.wrapAll()」も、囲う側の要素(例で言うと div.kaizenWrap)は、一つしか指定できません。
例えば、下記のようなコードは無効です。

$(".kaizen").wrap("<div class='kaizenWrap'><span>囲う側のdivと一緒にspanタグも追加したい</span></div>");

おまけ

囲われている要素をばらばらにするメソッドもあります。

例: 下記のような、divで囲われている要素を、ばらばらにしたい場合

<!-- HTML -->
<div class="kaizenWrap">
  <h1 class="kaizenHeading">あいさつ</h1>
  <p class="kaizen">こんにちは。KaizenPlatformです。</p>
  <p class="kaizenLinks">詳しい情報は<a href="https://kaizenplatform.com/">こちら</a>を見てね</p>
</div>

jQueryで「.unwrap()」を使って、このように記述します。

//JavaScript(jQuery)
$(".kaizenHeading, .kaizen, .kaizenLinks").unwrap();

すると、3つの要素を囲っていたdivがなくなり、HTMLはこのようになります。

<!-- HTML -->
<h1 class="kaizenHeading">あいさつ</h1>
<p class="kaizen">こんにちは。KaizenPlatformです。</p>
<p class="kaizenLinks">詳しい情報は<a href="https://kaizenplatform.com/">こちら</a>を見てね</p>

参考: .unwrap()