ywork2020.com

Title

要素内のコンテンツを配列形式で取得する

目次 (INDEX)

contentsとは

ここで説明するcontents とは次の語句からなるjQueryのメソッドです。
contents
読み: コンテンツ
意味: 内容

目次に戻る

contentsメソッドの概要

このメソッドを使うと、指定セレクタに該当する要素内の全てのコンテンツを配列形式で参照することが可能になります。

内包される純粋なテキストや子要素などの各ノードは分離され、それぞれをインデックス番号で参照することが可能です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

このメソッドの引数は(空)で使用します。

$(セレクタ).contents();

目次に戻る

サンプルコードと実行結果

このサンプルはcontentsメソッドの使い方の一例を示しています。 ここでは単純にcontentsメソッドからcssメソッドにつなげて、要素に対して style属性 を付与し、 background-color をpinkに指定しています。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<output id="idAnswer">
		innerText1 | <b>b element</b> | innerText2 | <u>u element</u> | innerText3 | <s>s element</s>
	</output>
</body>
  • 04: output要素 (この要素の識別子"idAnswer"がjQのセレクタになります)
  • 05: コンテンツ (要素なしテキストと要素ありテキストを3つずつ配置しています)
サンプルコード: script
<script>
	$("#idAnswer").contents().css("background-color","pink");
</script>
  • 02: jQ (contentsメソッドを使ってコンテンツを参照します)
  • 02: jQ (contentsにつなげてcssメソッドで背景色をピンクに変更します)
実行結果:
output要素: id="idAnswer"
innerText1 | b element | innerText2 | u element | innerText3 | s element

結果を見られてお分りいただけたでしょうか。先にも述べましたが、 contents()を使うと純粋な要素なしテキストと要素を分離して配列形式で参照することができます。 このサンプルでいうと以下の7つに分離されます。

  • contents()[0]: text = innerText1
  • contents()[1]: b要素 = b element
  • contents()[2]: text = innerText2
  • contents()[3]: u要素 = u element
  • contents()[4]: text = innerText3
  • contents()[5]: s要素 = s element
  • contents()[6]: text = ""

この7つの参照に対してcssメソッドでstyle属性を付与するわけですが、style属性を付与できるのは要素だけですから 要素のない純粋なテキストにはstyle属性を付与することはできません。今回のサンプルはこのことを利用して、 全ての子要素を対象としたstyle属性の付与を実践してみました。

目次に戻る

補足説明

前セクションでは子要素のみを抽出したようなプログラムになりましたので 参考として前セクションのHTMLと同じ内容で、要素なしのテキスト部分に要素を追加する場合を掲載しておきます。

ここではテキストノード(純粋なテキスト)を対象にして、 em要素 で内包するようにしてみます。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<output id="idAnswer">
		innerText1 | <b>b element</b> | innerText2 | <u>u element</u> | innerText3 | <s>s element</s>
	</output>
</body>
  • 04: output要素 (この要素の識別子"idAnswer"がjQのセレクタになります)
  • 05: コンテンツ (要素なしテキストと要素ありテキストを3つずつ配置しています)
サンプルコード: script
<script>
	$("#idAnswer").contents().filter(function(){
		return this.nodeType == 3;
	}).wrap("<em style='color: red;'>");
</script>
  • 02: jQ (contentsメソッドを使ってコンテンツを参照します)
  • 02: jQ (contentsにつなげてfilterメソッド中に関数を作成します)
  • 03: 関数の内容 (nodeType == 3 でテキストノードだけを抽出します)
  • 04: wrap (wrapメソッドを使ってテキストノードをem要素で内包します)
実行結果:
output要素: id="idAnswer"
innerText1 | b element | innerText2 | u element | innerText3 | s element

結果はinnerText1,innerText2,innerText3の純粋なテキストがem要素で内包されて斜体テキストとして表示されています。 また、style属性も効いているので文字色も赤になっています。

目次に戻る