mergeとは
- ここで説明する merge とは次の語句からなるjQueryの関数です。
- merge
- 読み: マージ
意味: 統合する、合併させる
merge関数の概要
この関数は、配列に任意の配列を結合します。
これは、関数の引数の1番目の配列の内容を書き換えます。つまり下記のような仕様です。
引数1 = 引数1 + 引数2;
これは、javascript の Array.push() に似ていますが、push()は、配列に配列を追加するだけでなく、値も追加することができます。
しかし、この merge()は配列に対して、配列しか結合することができません。その点については注意が必要です。 また、複数の配列の結合には対応していません。
ここで言っている配列とは、数値や文字の配列だけでなく、要素の配列のことも含みます。
構文
サンプルを見る前に構文を確認しておきます。
var arr1 = $.merge(arr1, arr2);サンプルコードと実行結果
ここでは、要素のオブジェクト配列を2つ用意しました。 1つ目は div要素を集合した配列です。2つ目は u要素を集合した配列です。
この2つの配列を、merge()を使って結合します。 結果としては、関数の 1番目の引数 = 1番目の引数 + 2番目の引数 という結果になります。
サンプルコード: CSS
<style>
b, u{
display: table-cell;
border: thin solid ##black;
color: ##white;
height: 80px;
width: 80px;
text-align: center;
vertical-align: middle;
}
.clsRed{
background-color: ##red;
}
.clsGreen{
background-color: ##green;
}
.clsBlue{
background-color: ##blue;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<b class ="clsRed">red</b>
<b class ="clsGreen">green</b>
<b class ="clsBlue">blue</b>
<u class ="clsRed">red</u>
<u class ="clsGreen">green</u>
<u class ="clsBlue">blue</u>
<br>
<button id="idButton">Click</button>
<script>...</script>
</body>
- 06, 07, 08: b (b要素です。各要素には違う class属性を設定しています。)
- 09, 10, 11: u (u要素です。各要素には違う class属性を設定しています。)
- 13: button (ボタンです。クリックすると script 02 ~ 07 のコードが実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
let arrElm1 = $("b");
let arrElm2 = $("u");
$.merge(arrElm1, arrElm2);
arrElm1.css("background-color", "##gray");
});
</script>
- 02-07: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
- 03: arrElm1 (変数です。これに b要素を取得して配列を作成します。)
- 04: arrElm2 (変数です。これに u要素を取得して配列を作成します。)
- 05: $.merge(arrElm1, arrElm2); (配列の結合を行います。ここでは、 arrElm1 = arrElm1 + arrElm2 という結果になります。つまり、引数の1番目の配列に1番目と2番目の配列を結合させた結果が代入されるということになります。)
- 06: css("background-color", "gray") (スタイルの設定を行います。背景色をグレーに設定します。)
red
green
blue
red
green
blue