連載
» 2010年08月27日 00時00分 公開

連載:jQuery逆引きリファレンス:第10回 jQuery 1.4編 (9/17)

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



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

連載目次


 現在の要素セット(カレント要素)を囲んでいる(ラップしている)要素を取り除くには、unwrapメソッドを利用します。

 以下は、ボタン・クリックのタイミングで、交互に<p>要素を<div>要素でラッピング、アンラッピングする例です。

<script type="text/javascript">

$(function() {

  // ボタン・クリック時に交互に行うべき処理
  $('#btn').toggle(function() {

    // <p>要素を<div>要素でラッピング
    $('p').wrap(
      $('<div></div>').css('border', 'solid 1px Blue')
    );
  }, function() {
    // <p>要素をラップしている要素をアンラップ
    $('p').unwrap();
  });
});

</script>

  ……中略……

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

リスト138 (Unwrap.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


[ラップ/アンラップ]ボタンをクリック

リスト138の実行結果

 ボタンをクリックするたびに、<p>要素に青の枠線が付いたり(ラッピング)、外れたり(アンラッピング)することが確認できると思います。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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