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について質問です。
