ywork2020.com

Title

要素群を自由にフィルタリングする

目次 (INDEX)

mapとは

ここで説明する map とは次の語句からなるjQueryのメソッドです。
map
読み: マップ
意味: 地図、位置づけ

目次に戻る

mapメソッドの概要

このメソッドは、呼び出し元の要素群の各要素にコールバック関数を使ってフィルタリングします。

この手法はコールバック関数の戻り値が新しい要素群として利用できるため、複雑な条件処理を作ることで非常に柔軟な要素群を取得することができます。

目次に戻る

構文

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

  • index: 要素のインデックス番号です。0 から始まります。
  • domElement: 要素そのものをElementオブジェクトにしたものです。
var mapElement = $(Selector).map(callback(index, domElement))

目次に戻る

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

ここでは、div 要素群を題材にします。

map() の呼び出し元は div 要素群です。この要素群から コールバック関数を使って if条件に一致するものだけを取り出して背景色を設定します。 if条件には match() を使用して要素のテキストに シングルクォーテーションで挟まれた文字列があるかを判定しています。

サンプルコード: CSS 
<style>
	div{
		border: thin solid currentColor;
		margin: 0.5em 0 0.5em 0;
		padding: 0.5em;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>Element DIV</div>
	<div>Element 'DIV'</div>
	<div>Element "DIV"</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06, 07, 08: div (ブロックコンテナー要素です。この要素らを取得して、 map() でフィルタリングします。)
  • 09: button (ボタンです。クリックすると script 07 ~ 09 のコードが実行されます。)
サンプルコード: script 
<script>
	function myFuncMap(index, domElement){
		if($(domElement).text().match(/'.*'/g) != null){
			return domElement;
		}
	}
	$("#idButton").click(function(){
		$("div").map(myFuncMap).css("background-color", "##lightpink");
	});
</script>
  • 02-06: function (map() メソッドに利用するために myFuncMap の名前でコールバック関数を作成します。)
  • 03: match() (match() メソッドでテキストのパターンマッチングを行います。)
  • 07-09: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 08: $("div").map(myFuncMap) (div 要素群を map(callback) を使ってフィルタリングします。)

以下のコードは記述方法が違うだけで、同じ処理を行っていますので、説明は割愛させていただきます。 

<script>
	$("#idButton").click(function(){
		$("div").map((index, domElement) => {
				if($(domElement).text().match(/'.*'/g) != null){
				return domElement;
			}
		}).css("background-color", "##lightpink");
	});
</script>
実行結果:
Element DIV
Element 'DIV'
Element "DIV"

目次に戻る