jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル
テキストエリアに入っている値を改行ごとに配列へ格納し、配列の値を配列の順番通りに、別々に分けられたテキストエリア(というかinput)に入れていくよー!というjQueryを書いてみました。
ちょっとまだよくわかんないとこもあるけれど、忘れないうちにメモ。
ベースのhtml
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル|sacnoha.com</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> </head> <body> <h1>jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル</h1> <p><a href="">元の記事はこちら</a></p> <p>ここにシェフ名を入力↓<br /> <textarea id="data" cols="30" rows="10">エチオピア デリー トプカ 本郷プティフ ドンピエール</textarea><br /> <button id="start">実行!</button></p> <p>こっちに分けて入力<br /> シェフ1<input type="text" name="chef1" /><br /> シェフ2<input type="text" name="chef2" /><br /> シェフ3<input type="text" name="chef3" /><br /> シェフ4<input type="text" name="chef4" /><br /> シェフ5<input type="text" name="chef5" /></p> </body> </html>
こんなようなhtmlファイルを用意。
サンプル用の値はこちらの5人の職人さんの名前を拝借しました!⇒5人の職人たち
Javascriptをこんなかんじで。
<script type="text/javascript"> $("#start").click(function(){ var str = $("#data").val().split("\n");//改行区切って配列化 $("input[name^='chef']").each(function(index) {//配列をinputへ入力 $(this).val(str[index]); }); }); </script>
スタートボタンをクリックすると、textareaの値を取得して下のinputへ行ごとにわけて表示します。
eachとstr[index]の使い方がよくわかってないです・・・こちらを参考にさせていただきました〜⇒ jQueryのeachとvalについて質問です。