1

$.map 関数を使用して、オブジェクトをループし、作成した要素を追加しています。しかし、私の場合、コンソール情報を適切に取得していますが、最終的にオブジェクトのみを追加して返します。コードの問題は何ですか?

私のコード:

  $('body').append(
 $.map(val.fields, function (val, i) {
     var element;
     if (val.label) {
         element = $('<label />', {
             text: val.label
         });
         console.log(element); //properly consoles 3 lables but not appending why?
     }
     if (val.type) {
         element = val.type === 'text' || val.type === 'submit' ? $('<input />', {
             type: val.type,
             name: val.name,
             value: val.value,
             id: val.vlaue
         }) : val.type === 'select' ? $('<select />', {
             name: val.name
         }) : '';
         console.log(element); // properly console 3 element and only this is appending
     }

     return element;
 }))
4

3 に答える 3

4

への呼び出しから返されるオブジェクトの型に問題があるよう$.mapです。

マップ呼び出しをreturn element[0](ラップされた jQuery オブジェクトではなく、作成された実際の dom 要素) に変更すると、次のように動作します。

$('body').append(
     $.map(val.fields, function (val, i) {
         var element;
         if (val.label) {
             element = $('<label />', {
                 text: val.label
             });
             console.log(element); //properly consoles 3 lables but not appending why?
         }
         if (val.type) {
             element = val.type === 'text' || val.type === 'submit' ? $('<input />', {
                 type: val.type,
                 name: val.name,
                 value: val.value,
                 id: val.vlaue
             }) : val.type === 'select' ? $('<select />', {
                 name: val.name
             }) : '';
             console.log(element); // properly console 3 element and only this is appending
         }

         return element[0]; // <----- Added [0] here
     })
)

例 - http://jsfiddle.net/nhds6/

これは、要素が常に存在することを前提としています。そうでない場合は、おそらくエラー処理を追加する必要があります。

于 2012-08-16T09:00:38.670 に答える
1

map の機能を誤解している可能性があります。

$.map() メソッドは、配列またはオブジェクトの各項目に関数を適用し、結果を新しい配列にマップします。

jQuery コレクションを追加することを検討してください。

var collection = $();


$.map(val.fields, function (val,i) {
    var element;
    if(val.label){
        element = $('<label />',{text:val.label});
        collection.add(element);
    }
    if(val.type) {
        element =   val.type === 'text' || val.type === 'submit' ? $('<input />',{
            type:val.type,
            name:val.name,
            value:val.value,
            id:val.vlaue
        }) :
        val.type === 'select' ? $('<select />',{name:val.name}) : '';
        collection.add(element);
    }
});

$('body').append(collection);

user338128 の回答との主な違いは、複数のループが必要ないことです。

于 2012-08-16T08:59:13.023 に答える
0

渡すコールバック関数は$.map一度に1つのものしか返すことができませんelementが、2つのifステートメントを続けて使用すると、2つの要素を作成しようとする可能性があります。ただし、2つの要素を作成すると、2番目の要素のみがelement変数になります。あなたは戻ります。

val.labelとval.typeが両方とも設定されており、val.label優先する必要がある場合は、2番目ifを。に変更しelse ifます。

両方を同時に作成できるようにする必要がある場合は、おそらく$.mapそれを行うのが最善の方法ではありません。

于 2012-08-16T08:55:13.423 に答える