配列を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>
項目１：<input type="text" name="radio_value" value="中身１"><br />
項目２：<input type="text" name="radio_value" value="あああ２"><br />
項目３：<input type="text" name="radio_value" value="テスト３"><br />
項目４：<input type="text" name="radio_value" value="ﾃｽﾄ四"><br />
項目５：<input type="text" name="radio_value" value="てすと５"><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の数だけループを回してる。
-------
以上。
関連記事
-
-
無料でジオコーディング(住所→経度緯度)を行う
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
スマホ対応カルーセルスライダーslickの使い方
イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...
-
-
jQueryでjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
-
jQueryでドロワーメニューの作成
■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。   ...
-
-
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...
-
-
Ajaxのクロスドメイン2
PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...
-
-
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
-
-
tableのヘッダーを残して表示(jquery-decapitate)
bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...
- PREV
- jQueryの最新バージョン呼び出しとバージョン確認
- NEXT
- imgタグとPHPでグラフ作成