連載
» 2010年02月12日 00時00分 UPDATE

連載:jQuery逆引きリファレンス:第4回 要素の操作&ユーティリティ編 (4/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 現在の要素セット(カレント要素)を指定された要素で囲むには、、wrap/wrapAll/wrapInnerメソッドを利用します。引数htmlには、HTML文字列のほか、DOM Elementオブジェクトを指定することもできます。

 それぞれの違いについては、実際の動作を確認した方が早いと思いますので、まずは具体的な例を見てみましょう。以下は、既存の<p>要素に対して、枠線付きの<div>要素を追加する例です。

<script type="text/javascript">

$(function() {

  $('#wrap > p').wrap(
    $('<div></div>').css('border', 'solid 1px Blue')
  ); // 個別の要素にラップ

  $('#wrapAll > p').wrapAll(
    $('<div></div>').css('border', 'solid 1px Blue')
  ); // 要素セット全体をラップ

  $('#wrapInner > p').wrapInner(
    $('<div></div>').css('border', 'solid 1px Blue')
  ); // 個別要素の子要素をラップ
});

</script>

  ……中略……

<h3>wrapメソッド</h3>
<div id="wrap">
  <p>ASP.NET MVC実践プログラミング</p>
  <p>JavaScriptマスターブック</p>
  <p>10日でおぼえるASP.NET 3.5入門教室</p>
</div>

<h3>wrapAllメソッド</h3>
<div id="wrapAll">
  <p>ASP.NET MVC実践プログラミング</p>
  <p>JavaScriptマスターブック</p>
  <p>10日でおぼえるASP.NET 3.5入門教室</p>
</div>

<h3>wrapInnerメソッド</h3>
<div id="wrapInner">
  <p>ASP.NET MVC実践プログラミング</p>
  <p>JavaScriptマスターブック</p>
  <p>10日でおぼえるASP.NET 3.5入門教室</p>
</div>

リスト063 指定された要素セットを<div>要素でラッピング(Wrap.htm)
このHTMLを実際にブラウザで開く

dt-down_arrow.gif


ブラウザで開く

dt-down_arrow.gif
dt-wrap.gif リスト063の実行結果

 まず、wrap/wrapInnerメソッドとwrapAllメソッドとの違いは、要素セットに含まれる個々の要素(ここでは<p>要素)をそれぞれに囲むか、それとも、要素セット全体をまとめて囲むかの違いです。

 wrapメソッドとwrapInnerメソッドとの違いは、見掛けだけでは分かりにくいかもしれませんが、要は、カレント要素そのものを囲むのか、それともカレント要素配下の子要素を囲むかの違いです。

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。