ywork2020.com

Title

配列を作成する

目次 (INDEX)

makeArrayとは

ここで説明するmakeArray とは次の語句からなるjQueryのメソッドです。
make
読み: メイク
意味: 作る、作成する
array
読み: アレイ
意味: 配列

目次に戻る

makeArrayメソッドの概要

このメソッドは、引数に与えた「要素」から配列を作成します。

上記している「要素」とはHTML要素だけではなく、配列としての要素のことを言っています。 つまり、HTMLElementだけではなく、文字列や数値のことも含めて「要素」と言っています。

目次に戻る

構文

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

var arrElemens = $.makeArray($(Selector));
var arrString = $.makeArray([str, str, ...]);
var arrNumber = $.makeArray([num, num, ...]);

目次に戻る

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

ここでは、makeArray()を使って要素配列を作成し、その配列から各要素のインデックス番号を後付けで振っています。

要素配列を取得するということでは、類似メソッドとして、 get() メソッドもありますので参考にしてください。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<ul>
		<li>list A</li>
		<li>list B</li>
		<li>list C</li>
	</ul>
</body>
  • 06, 07, 08: li (この要素のコンテンツに後付けでインデックス番号を振っていきます。)
サンプルコード: script
<script>
	let arrElemens = $.makeArray($("li"));
	$(arrElemens).each((idx, elm) => {
		$(elm).append(" : " + idx);
	});
</script>
  • 02: arrElemens (この配列変数に li 要素を要素配列として代入します。)
  • 03: each() (配列の各要素に繰り返し処理を行います。ここではコールバック関数を使っています。取得したインデックス値(idx)と要素(elm)を関数の処理に利用しています。)
  • 04: append() (関数の処理です。各要素内の末尾にインデックス値をテキストノードとして追加しています。)
実行結果:
  • list A
  • list B
  • list C

目次に戻る