ywork2020.com

Title

参照要素を詳細に絞り込む

目次 (INDEX)

filterとは

ここで説明するfilter とは次の語句からなるjQueryのメソッドです。
filter
読み: フィルター
意味: 濾過器、こし器、濾過材

目次に戻る

filterメソッドの概要

このメソッドは使い方しだいで、ノードや要素を詳細に絞り込むことを可能にします。

jQueryの場合、$(セレクター)からjQオブジェクトを生成して、それに該当する要素、または要素群に対して各種のメソッドを実行していくわけですが、 $(セレクター)だけでは細かな要素の絞り込みができない場合があります。その場合filterメソッドが役に立つこともあります。

目次に戻る

構文

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

ここでCONTENTSと書いてあるものはcontents()メソッドのことではありません。 もちろんcontents()メソッドを使用することを意識して書きましたが、例えばchildren()メソッドでも、 jQオブジェクトでも構いません。

CONTENTS.filter(Element);
CONTENTS.filter(Selector);
CONTENTS.filter(jQ Object);
CONTENTS.filter(function(){return 条件式});

目次に戻る

実践: コンテンツ内の要素で絞り込む

このサンプルはidParentのコンテンツからu要素のみ抜き出して、em要素に置換てみました。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<b>sampleElement B</b><br>
		<u>sampleElement U</u><br>
		<b>sampleElement B</b><br>
		<u>sampleElement U</u>
	</div>
</body>
  • 05: div要素 (親要素のidParentです)
  • 06-09: コンテンツ (4つの子要素です)
サンプルコード: script
<script>
	$("#idParent").contents().filter("u").replaceWith("<em style='color: red;'>replaceElement EM</em>");
</script>
  • 02: idParentのコンテンツからフィルターでu要素のみを取得しています。 (replaceWithは置換メソッドです)
実行結果:
sampleElement B
sampleElement U
sampleElement B
sampleElement U

目次に戻る

実践: コンテンツ内のクラス名で絞り込む

このサンプルはidParentのコンテンツからクラス属性が"clsA"の要素のみを抜き出して、 テキストの書き換えを行うと同時に文字色を赤色にしてみました。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<b class="clsA">sampleElement</b><br>
		<b class="clsB">sampleElement</b><br>
		<b class="clsB">sampleElement</b><br>
		<b class="clsA">sampleElement</b>
	</div>
</body>
  • 05: div要素 (親要素のidParentです)
  • 06-09: コンテンツ (4つの子要素です = clsA × 2 と clsB × 2)
サンプルコード: script
<script>
	$("#idParent").contents().filter(".clsA").text("rewriteText").css("color","red");
</script>
  • 02: idParentのコンテンツからフィルターでclass属性が"clsA"の要素のみを取得しています。 ( text メソッドで書き換え & css メソッドで文字色を赤色)
実行結果:
sampleElement
sampleElement
sampleElement
sampleElement

目次に戻る

実践: コンテンツ内でjQオブジェクトで絞り込む

このサンプルはidParentのコンテンツからjQオブジェクトを使って最後のb要素を特定して、 em要素の内包を行うと同時に文字色を赤色にしてみました。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<b>sampleElement B</b><br>
		<u>sampleElement U</u><br>
		<b>sampleElement B</b><br>
		<u>sampleElement U</u>
	</div>
</body>
  • 05: div要素 (親要素のidParentです)
  • 06-09: コンテンツ (4つの子要素です)
  • 08: この要素内にem要素が書き込まれます
サンプルコード: script
<script>
	$("#idParent").contents().filter($("b:last")).html("<em>rewriteHTML-EM)</em>").css("color","red");
</script>
  • 02: idParentのコンテンツからフィルターで最後のb要素を特定しています ( html メソッドでem要素の書込み & css メソッドで文字色を赤色)
実行結果:
sampleElement B
sampleElement U
sampleElement B
sampleElement U

目次に戻る

実践: コールバック関数を利用する

ここではfilterメソッドの引数に関数を使用してみました。 このように関数の戻り値を引数に指定する使い方が、このメソッドの一般的な使い方かもしれません。

ここでの関数の内容は nodeType ==3、つまりテキストノードを抜き出して、そのノードを wrap メソッドを使ってspan要素に内包しています。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idNodes">
		sampleText1<br>
		<b>sampleElement1</b><br>
		sampleText2<br>
		<u>sampleElement2</u><br>
		<!--samplecomment-->
		sampleText3
	</div>
</body>
  • 05: div要素 (idNodes)
  • 06-11: コンテンツ (ノードとして分解すると以下の通り)
    • 06: テキストノード
    • 07: エレメントノード
    • 08: テキストノード
    • 09: エレメントノード
    • 10: コメントノード
    • 11: テキストノード
サンプルコード: script
<script>
	$("#idNodes").contents().filter(function(){
		return this.nodeType == 3;
	}).wrap("<span style='color: red;'>");
</script>
  • 02: idNodesのコンテンツからフィルターの引数に関数の戻り値を指定しています
  • 03: 戻り値はthis.nodeType == 3と条件を指定しています
  • 04: filterメソッド実行結果に対して、span要素の内包処理をしています。
実行結果:
sampleText1
sampleElement1
sampleText2
sampleElement2
sampleText3

目次に戻る