スポンサーリンク
スポンサーリンク

他の要素を包む

jQuery

指定した要素を追加するのではなく、
指定した要素を包むこと(ラップ)ができます。

各要素を指定した要素で包む

wrap()は、セレクターで指定した要素を別の要素で包む
命令です。包みたいHTMLタグを<要素名></要素名>の
ように空の状態で括弧内に記述します。

サンプルコードで
$(“strong”).wrap(“<h2></h2>”);

と書きます。その後、F12のelementsタブで確認すると
<strong>タグが<h2>タグで囲まれているのが
確認できます。

全要素を別の要素で囲む

指定した複数の要素をまとめて、別の要素で
囲むには、wrapAll()という命令を使います。

サンプルコードで
$(“time”).wrapAll(“<h1></h1>”);

と書きます。その後、F12のelementsタブで確認すると
<time>タグが<h1>タグで囲まれているのが
確認できます。今回は、wrap()とは違って
2つがまとめて<h1>タグに囲まれています。

ただ、wrapALL()は、セレクターで指定した要素が
複数ある場合、要素間に含まれる別の要素、テキストは
除外します。実例はサンプルコードの26行目~28行目の記述は
43行目の命令が実行されると、「金」「銅」のテキストは
<h1>タグで囲まれますが、「銀」という
テキストだけ追い出されています。

指定した要素の子要素を別の要素で囲む

指定した要素の子要素、テキストを囲みたいときは、
wrapInner()を使います。wrapInner()も囲みたい
HTMLタグを空にして書きます。

実行結果はこちらです。

コメント

タイトルとURLをコピーしました