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

» 2010年02月12日 00時00分 公開



「連載: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を実際にブラウザで開く


ブラウザで開く

リスト063の実行結果

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

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

Copyright© Digital Advantage Corp. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

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

メールマガジン登録

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