5.他の要素で包む
指定した要素を追加するのではなく、特定の要素で包む(ラップする)こともできます。
■各要素を指定した要素で包む
wrap() は、セレクターで指定した要素を、別の指定した要素で包む命令です。括弧内に、包みたいhtmlタグを空の状態で記述します。
▼サンプルコード(スクリプト部分)
$("strong").wrap("<h1></h1>");
上記のサンプルを実行すると、strong要素がh1要素で包まれます。セレクターに複数の要素が含まれる場合は、それぞれの要素が個別に包まれます。
▼サンプルコード(元の(X)HTML部分)
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
▼実行結果(実際のWebページ)
<h1><strong>テキストテキスト</strong></h1>
<h1><strong>テキストテキスト</strong></h1>
■全要素を別の要素で包む
指定した複数の要素を、まとめて別の要素で包みたい場合は、wrapAll() を利用します。wrapAll() も、包みたいhtmlタグを空の状態で記述します。
▼サンプルコード(スクリプト部分)
$("strong").wrapAll("<h1></h1>");
上記のサンプルでは、すべてのstrong要素をまとめてh1要素で包む形に変更します。
▼サンプルコード(元の(X)HTML部分)
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
▼実行結果(実際のWebページ)
<h1>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</h1>
wrapAll() は、セレクターで指定した要素が複数ある場合、要素の間に含まれる別の要素やテキストを除外します。たとえば以下の(X)HTMLでは、1つ目のstrong要素と2つ目のstrong要素の間にあるテキストが追い出され、strong要素だけがh1要素で包まれます。
▼サンプルコード(元の(X)HTML部分)
<strong>テキストテキスト</strong>
テキストテキスト
<strong>テキストテキスト</strong>
▼実行結果
<h1>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</h1>
テキストテキスト
■指定した要素の子要素を別の要素で包む
指定した要素の子要素やテキストを別の要素で包みたい場合は、wrapInner() を利用します。wrapInner() も、包みたいhtmlタグを空の状態で記述します。
▼サンプルコード(スクリプト部分)
$("p").wrapInner("<strong></strong>");
上記のサンプルでは、p要素の中身のテキストをstrong要素で包むように変更しています。
▼サンプルコード(元の(X)HTML部分)
<p>テキストテキスト</p>
<p>テキストテキスト</p>
▼実行結果(実際のWebページ)
<p><strong>テキストテキスト</strong></p>
<p><strong>テキストテキスト</strong></p>
6.要素の置き換え
指定した要素を他の要素に置き換えることもできます。要素の置き換えは、replaceWith() を利用します。replaceWith() は、括弧内に置き換え後の(X)HTMLを記述します。
▼サンプルコード(スクリプト部分)
$("p").replaceWith("<h1>置き換え後</h1>");
上記のサンプルを実行すると、p要素を「<h1>置き換え後</h1>」に置き換えて表示します。
▼サンプルコード(元の(X)HTML部分)
<p>置き換え前</p>
▼実行結果(実際のWebページ)
<h1>置き換え後</h1>
7.要素の削除
指定した要素を削除できます。削除には remove() を使います。
▼サンプルコード(スクリプト部分)
$("p strong").remove();
上記のサンプルを実行すると、p要素に含まれるstrong要素を削除します。
▼サンプルコード(元の(X)HTML部分)
<p><strong>削除する要素</strong>テキストテキストテキスト</p>
▼実行結果(実際のWebページ)
<p>テキストテキストテキスト</p>
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。