他の要素を包む

2015年8月3日

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

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

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

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

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

全要素を別の要素で囲む

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

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

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

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

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

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

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        margin:0 auto;}
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">
    <strong>サンプルテキスト</strong>
    <strong>実験用テキスト</strong>
    <time>4pm</time>
    <time>5pm</time>
    <em>金</em>
    銀
    <em>銅</em>
    <b>実験</b>
    <b>実験</b>
</div><!--contatiner-->

<script>
$(document).ready(function(){
    
    //<strong></strong>を<h2>で囲む
    $("strong").wrap("<h2></h2>");
    
    //複数の要素をまとめて<h1>で囲む
    $("time").wrapAll("<h1></h1>");

    //複数の要素をまとめて<h1>で囲む
    $("em").wrapAll("<h1></h1>");

    //指定した要素の子要素を別の要素で囲む
    $("b").wrapInner("<h4></h4>");
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

margin:0 auto;}

</style>

</head>

<body>

<strong>サンプルテキスト</strong>

<strong>実験用テキスト</strong>

銀

</div>

$(document).ready(function(){

//<strong></strong>を<h2>で囲む

$("strong").wrap("<h2></h2>");

//複数の要素をまとめて<h1>で囲む

$("time").wrapAll("<h1></h1>");

//複数の要素をまとめて<h1>で囲む

$("em").wrapAll("<h1></h1>");

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

$("b").wrapInner("<h4></h4>");

});

</script>

</body>

</html>