web-dev-qa-db-ja.com

フォームjQueryのすべての要素をループする方法

フォームのすべての子要素をループする最良の方法は何だろうと思っていましたか？フォームに入力要素と選択要素の両方が含まれています。

今のところ：

success: function(data) {
                $.each(data.details, function(datakey, datavalue) {
                    $('#new_user_form > input').each(function(key, value) {
                        if($(this).attr('id') == datakey) {
                            $(this).val(datavalue);
                        }
                    });
                });
            }

ただし、これはフォームの入力要素をループするだけで、選択要素も含めたいと思います。

私が試してみました：

$('#new_user_form > input, #new_user_form > select').each(function(key, value) {

しかし、これは機能しません。なぜこれが起こっているのか誰も知っていますか？ありがとう！

jqueryloops
36
Jim

JQueryから ：入力セレクターページ ：

：inputはjQuery拡張機能であり、CSS仕様の一部ではないため、：inputを使用するクエリは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。 ：inputを使用して要素を選択するときに最高のパフォーマンスを実現するには、まず純粋なCSSセレクターを使用して要素を選択し、次に.filter（ "：input"）を使用します。

これが最良の選択です。

$('#new_user_form *').filter(':input').each(function(){
    //your code here
});
72
Ohgodwhy

純粋なJavaScriptはそれほど難しくありません。

for(var i=0; i < form.elements.length; i++){
    var e = form.elements[i];
    console.log(e.name+"="+e.value);
}

注：form.elementsはオブジェクトのfor-inループであるため、期待どおりに機能しません。

答えが見つかりました ここ（クリス・ピーチマンによる） 、文書化された ここ（W3S） .

25
user669677
$('#new_user_form').find('input').each(function(){
   //your code here
});
15
Adarsh Raj

#jquery Freenode IRCチャネル：

$.each($(form).serializeArray(), function(_, field) { /* use field.name, field.value */ });

チャンネルの@Corkに感謝します。

9
Sai Krishna

私は使用しています：

$($('form').prop('elements')).each(function(){
    console.info(this)
});

見苦しいようですが、jQueryを使用してすべての要素を取得するより良い方法です。

4
romuleald

このようにするとどうなりますか：-

$('#new_user_form input, #new_user_form select').each(function(key, value) {

参照LIVE DEMO

3
Siva Charan

私は、このシンプルなjqueryスニペットを見つけました。これは、使用したいセレクターのタイプを選択するのに便利です。

$("select, input").each(function(){
     // do some stuff with the element
});
3
Phil

$('#new_user_form :input')があなたの進むべき道です。 >セレクターの省略に注意してください。有効なHTMLフォームでは、入力タグをフォームタグの直接の子にすることはできません。

1
scoota269

フォーム送信内で2つのjQueryシリアライザーのいずれかを実行して、送信された値を持つすべての入力を取得します。

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serializeArray();

var formData = JSON.stringify(criteria);

serializeArray（）は、名前と値の配列を生成します

0：{名前： "OwnLast"、値： "Bird"}
1：{名前： "OwnFirst"、値： "Bob"}
2：{名前： "OutBldg []"、値： "PDG"}
3：{名前： "OutBldg []"、値： "PDA"}

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serialize();

serialize（）は、標準のURLエンコード表記でテキスト文字列を作成します

「OwnLast = Bird＆OwnFirst = Bob＆OutBldg％5B％5D = PDG＆OutBldg％5B％5D = PDA」

0
Greg Bologna