勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

配列をjQueryで取り扱う

      2014/07/03

やりたかった事は、

・テキストボックスが複数ある。そのページに送信するクエリによってテキストボックスの数が変わる。
・テキストボックスのnameはaaaみたいに配列で渡したい
・テキストボックスの中身をjQueryで取得したい

というもの。JSやjQueryで配列を取り扱うことが少ないので
忘れないようにメモ。

■サンプル
http://sample.taitan916.info/eq/

■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('#result_button').click(function(){ //ボタンを押したらイベント
$('#result_id').html(''); //divのところを初期化
var i = 0;
var radio_array = new Array(); //配列を宣言

//radio_valueの数だけループ
$("[name='radio_value']").each(function() {

//radio_valueを順番にradio_arrayに代入していく
radio_array[i] = $("[name='radio_value']").eq(i).val();
i++;
});

//iが配列の数未満の場合にループ
for(i=0; i<radio_array.length; i++){

//divのところに書き込んでいく
$('#result_id').append(radio_array[i]+'<br>');
}
});
})
</script>
<title>配列をjQueryで取り扱う</title>
</head>
<body>
<h1>配列をjQueryで取り扱う</h1>
<form>
項目1:<input type="text" name="radio_value" value="中身1"><br />
項目2:<input type="text" name="radio_value" value="あああ2"><br />
項目3:<input type="text" name="radio_value
" value="テスト3"><br />
項目4:<input type="text" name="radio_value" value="テスト四"><br />
項目5:<input type="text" name="radio_value
" value="てすと5"><br />
<input type="button" value="result" id="result_button">
</form>
<div id="result_id"></div>
</body>
</html>

■使えそうなもの
append()
http://semooh.jp/jquery/api/manipulation/append/content/

コンテンツを追加できる。
.html('')とかで初期化というか空にしてから追加していくと
使いやすそう。

-------

eq()
http://semooh.jp/jquery/api/core/eq/position/

指定したポジションの要素を取り出す。
ソースだとradio_valueの位置をループで回して
1つずつ取り出して配列に入れていっている。

-------

each
http://semooh.jp/jquery/api/core/each/callback/

合致した要素だけループを回す? ということなんかな。
name=radio_valueの数だけループを回してる。

-------

以上。

 - jQuery

  関連記事

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...

フォームのpasswordとtextをjQueryで切り替えて

パスワード入力の際、大抵「●●●」みたいな形で隠されるが、 jQueryでそれを ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...