ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryに親タグを追加する方法
jquery では、wrap() 関数を使用して、指定した要素に親タグを追加できます。追加方法: 1. jquery セレクターを使用して、指定した要素オブジェクトを選択します (構文 "$(selector)"; 2. Wrap() 関数を使用して、取得した要素オブジェクトに指定した親要素を追加します (構文 "element object" .wrap(html|ele|fn)」。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
jquery では、wrap() 関数を使用して、指定された要素に親タグを追加できます。
jquery Wrap()
wrap() メソッドは、指定された HTML 要素を使用して、選択された各要素をラップします。選択した要素の外側に親要素を追加します。
この種のラッピングは、元の文書の意味上の品質を損なうことなく、文書に追加の構造化マークアップを挿入する場合に最も役立ちます。この関数の原理は、提供された最初の要素 (提供された HTML マークアップ コードから動的に生成される) を調べ、そのコード構造内の最上位の祖先要素を見つけることです。この祖先要素はラッピング要素です。この関数は、HTML マークアップ コード内の要素にテキストが含まれている場合には使用できません。したがって、テキストを追加したい場合は、パッケージが完成した後に追加する必要があります。
# 構文:
$(selector).wrap(html|ele|fn)
# パラメータの説明:
#
$("p").wrap("<div class='wrap'></div>");
$("p").wrap(document.getElementById('content'));
#コールバック関数の説明: 元の div の内容を新しい div のクラスとして使用し、各要素をラップします
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; });Result:
<div class="container"> <div class="Hello"> <div class="inner">Hello</div> </div> <div class="Goodbye"> <div class="inner">Goodbye</div> </div> </div>
要素に追加する例親要素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").wrap("<div></div>"); }); }); </script> <style type="text/css"> div { background-color: yellow; } </style> </head> <body> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>给每个P元素包裹一个div元素</button> </body> </html>[推奨学習: jQuery ビデオ チュートリアル
、
Web フロントエンド ビデオ]
以上がjqueryに親タグを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。