sacnoha's Stories

jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル

NO IMAGE

テキストエリアに入っている値を改行ごとに配列へ格納し、配列の値を配列の順番通りに、別々に分けられたテキストエリア(というか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について質問です。

サンプルページはこちら