jQueryのmergeを使って2つの異なる配列をマージしマージ結果を表示する方法をご紹介します。
2つの異なる配列
onearry = [ “A”, “B”, “C”, “D” ]
twoarry = [ “e”, “f”, “g”, “h”, “i”, “k” ]
のマージ結果を表示してみます。
Contents
2つの配列のマージした結果を表示するCSSの記述
※ここは重要ではないので必要に応じて変更して下さい。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; line-height: 1.8em; } h1{ font-size:16px; text-align:center; font-weight:normal; padding:10px 0; position: relative; } p{ text-align: center; padding-bottom: 20px; } #mrglist{ width: 20px; margin: 0 auto; } ul{ list-style: none; } </style>
2つの配列のマージした結果を表示するHTML記述
※id=”mrglist”タグにマージ結果を出力します。必要に応じて変更して下さい。
<h1>2つの配列をマージして出力します。</h1> <p> 配列1 onearry = [ "A", "B", "C", "D" ]<br> と<br> 配列2 twoarry = [ "e", "f", "g", "h", "i", "k" ]<br> をマージして以下に出力します。 </p> <ul id="mrglist"></ul>
jQueryのmergeを使って2つの異なる配列をマージしマージ結果を表示するJavaScript記述
※jqueryのmerge()を使って2つの配列onearry[]とtwoarry[]を配列mrgarry[]にマージし、id=”mrglist”にマージ結果表示します。
<script src="./jquery-2.2.0.min.js"></script> <script type="text/javascript"> $(function() { var onearry = [ "A", "B", "C", "D" ]; var twoarry = [ "e", "f", "g", "h", "i", "k" ]; var mrgarry = $.merge( $.merge( [], onearry ), twoarry ); var mrglist = ''; for (var i=0; i<mrgarry.length;i++){ mrglist += '<li>'+ mrgarry[i] + '</li>'; } document.getElementById('mrglist').innerHTML = mrglist; }); </script>
jQueryのmergeを使って2つの異なる配列をマージし、マージ結果を表示するデモページ
jQueryのmergeを使って2つの異なる配列をマージし、マージ結果を表示するデモ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告