jQuery DOM 操作 Wrap()

要素を他の要素でラップする場合、つまり親要素を要素に追加する場合、JQuery はそのような処理のためのラップ メソッドを提供します

.wrap(wrappingElement): コレクション HTML 構造内の一致する各要素をラッパーで囲みます。

たとえば、以下に例を書いてみましょう

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <p>php 中文网</p>


    <script>
        $("p").wrap("<div></div>");
    </script>
</body>
</html>

友達、上のコードを見て、pタグに親ノードを追加して、コードをコピーしてローカルで実行し、F12を押して表示します


。 Wrap( function ): 一致する要素をラップするために使用される HTML コンテンツまたは jQuery オブジェクトを返すコールバック関数

使用後の効果は、コードを関数本体内に記述できる点を除き、パラメーターを直接渡す場合と同じです。メソッドが異なります

例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <p>php 中文网</p>

    <script>
        $('p').wrap(function(){
            return '<div>';
        })
    </script>
</body>
</html>

実際、効果は最初のものと同じですが、記述方法が異なります

注: Wrap()関数は任意の文字列またはオブジェクトを受け入れることができ、これらを $() ファクトリ関数に渡して DOM 構造を指定できます。この構造は数レベルの深さにネストできますが、コア要素のみを含める必要があります。一致する各要素はこの構造体によってラップされます。このメソッドは、後で連鎖メソッドを使用できるように、元の要素セットを返します。

学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <script> $("p").wrap("<div></div>"); </script> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜