web-dev-qa-db-ja.com

jQueryは入力から値を取得し、配列を作成します

ページに多くの入力があります。 jQueryを使用して、各入力の名前と値で連想配列を作成します。私はもう試した：

<input class="activeInput" type="text" name="key1" value="red">
<input class="activeInput" type="text" name="key3" value="France">

inputValues = $('.activeInput').val();

編集-洞察力に富んだコメントのおかげで、オブジェクトを作成する方が良い方法のようです。代わりにオブジェクトを作成する方法に関する提案はありますか？

javascriptjqueryinputkey-value
19
Don P

.each() を使用して要素を反復処理し、次のように名前と値をマップ（プレーンオブジェクト）に追加できます。

var map = {};
$(".activeInput").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

alert(map.key1); // "red"

実際の動作を参照.

52
Jon

この質問は4年前のものであり、受け入れられた答えで十分であることは承知しています。それでも、この質問はGoogleでの最初の検索結果であるため、完了のために回答を投稿したいと思います。

jQueryには、バージョン1.2（2007年にリリース）のマップ機能があります。次のような簡単なことができます（これはnotクロスブラウザソリューションです）：

var $inputValues = $('.activeInput').map((i, el) => el.val());

JavaScriptでだれも矢印関数を使用するべきではありませんが、IEまたはSafari。次のisクロスブラウザソリューション：

var $inputValues = $('.activeInput').map(function() {
    return $(this).val();
});

戻り値はnotネイティブ配列であることに注意することが重要です。 Array.prototypeに存在するメソッドを使用しようとすると、問題が発生する可能性があります。結果を配列に変換するには、次のようにします。

var inputValues = $('.activeInput').map(function() {
    return $(this).val();
}).toArray();
11
Samuel Willems

それらをループで実行することにより、文字列でアクセス可能な値を持つオブジェクトを作成できます。 Javascriptには連想配列の概念はありませんが、ブラケット構文を使用すると、PHPで連想配列が機能するのとほぼ同じ方法でオブジェクトのプロパティにアクセスできます。

var values = {};
$('.activeInput').each(function() {
    values[this.name] = this.value;
});

console.log(values['key1'], values['key3']);
// Note, this is the same as above.
console.log(values.key1, values.key3);

コンソールに表示されるはず：赤いフランス

これが JsFiddle http://jsfiddle.net/rEtVt/ です。

これは、クイックルックアップに使用されるハッシュマップ（概念）とも呼ばれます。

5
earl3s
var inputValues = new Array();
$('input').each(function(){
    inputValues[$(this).attr('name')] = $(this).val();
});

もちろん、すべての入力の値が必要だと仮定しています。

そうは言っても、使用しない多くの理由とArrayが注目されました。

2
circusdei

Ajax送信のためにフォームをシリアル化する必要がある場合は、 serialize および serializeArray jQueryメソッドを確認する必要があります。サーバー上に配列を作成する必要がある同じname属性を持つ多くの入力がある場合、特殊なケースが発生する可能性があります。

そうでなければ、フォーム要素でjquery serializeArrayを呼び出し、その結果を繰り返してオブジェクトに変換します。

UPD：サンプルを追加 http://jsfiddle.net/zQNUW/

1
Andrey Kuzmin