jqueryに親タグを追加する方法

青灯夜游
リリース: 2022-11-18 19:30:07
オリジナル
1368 人が閲覧しました

jquery では、wrap() 関数を使用して、指定した要素に親タグを追加できます。追加方法: 1. jquery セレクターを使用して、指定した要素オブジェクトを選択します (構文 "$(selector)"; 2. Wrap() 関数を使用して、取得した要素オブジェクトに指定した親要素を追加します (構文 "element object" .wrap(html|ele|fn)」。

jqueryに親タグを追加する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

jquery では、wrap() 関数を使用して、指定された要素に親タグを追加できます。

jquery Wrap()

wrap() メソッドは、指定された HTML 要素を使用して、選択された各要素をラップします。選択した要素の外側に親要素を追加します。

この種のラッピングは、元の文書の意味上の品質を損なうことなく、文書に追加の構造化マークアップを挿入する場合に最も役立ちます。この関数の原理は、提供された最初の要素 (提供された HTML マークアップ コードから動的に生成される) を調べ、そのコード構造内の最上位の祖先要素を見つけることです。この祖先要素はラッピング要素です。この関数は、HTML マークアップ コード内の要素にテキストが含まれている場合には使用できません。したがって、テキストを追加したい場合は、パッケージが完成した後に追加する必要があります。

# 構文:

$(selector).wrap(html|ele|fn)
ログイン後にコピー

jqueryに親タグを追加する方法

# パラメータの説明:

    # #html パラメータの説明: 新しく作成した div ですべての段落をラップします。
  • #

    $("p").wrap("<div class=&#39;wrap&#39;></div>");
    ログイン後にコピー

  • ##elem パラメータの説明: ID「content」を持つ div を使用して、各段落をラップします。段落
    #
    $("p").wrap(document.getElementById(&#39;content&#39;));
    ログイン後にコピー
  • #コールバック関数の説明: 元の div の内容を新しい div のクラスとして使用し、各要素をラップします

  • #
    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    
    $(&#39;.inner&#39;).wrap(function() {
      return &#39;<div class="&#39; + $(this).text() + &#39;" />&#39;;
    });
    ログイン後にコピー
Result:
    <div class="container">
      <div class="Hello">
        <div class="inner">Hello</div>
      </div>
      <div class="Goodbye">
        <div class="inner">Goodbye</div>
      </div>
    </div>
    ログイン後にコピー
  • wrap() で親タグ

を各

要素に追加する例親要素

<!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に親タグを追加する方法

以上がjqueryに親タグを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート