0

そのため、ページに表示される新しい電話データを取得するための jQuery コードに取り組んでいます。

これまでのところ、電話番号の数に関係なく最後の電話番号が表示されることを除いて、すべてが機能しています。私が$('.new_option').append(inputphone);最後のものをオーバーライドしているためであることがわかりました。

これがjsFiddleです（データベースオブジェクトがないため、まったく同じコードではありませんが、同じ問題が発生します）：http://jsfiddle.net/leongaban/dvYMb/

変数 (ラベル付き HTML + 入力):

var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

HTMLDOM:

<li>
    <ul class="new_option">
    </ul>
</li>

各ループ:

$(profileData.phones).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData.phones[i].label);
    $('.new_option').append(inputphone); //<-- The Issue
    $('.added_phone').parent().find('label').text(profileData.phones[i].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[i].tag+"phone" + i);
    $('.added_phone').attr('value', profileData.phones[i].label);
});

コンソール：
ここに画像の説明を入力

ページの結果:
ここに画像の説明を入力

私の質問は、この行で一意の ID を持つ新しいフィールドを動的に生成するにはどうすればよいですか?

$('.new_option').append(inputphone);

このあたりを検索すると、オブジェクトを使用していると言っている人がいますが、そのアプローチはまだ成功していません。

これをどのように処理しますか？

4

2 に答える 2

0

この問題は、ul をいっぱいにしてからリセットしないために発生します。

必要な作業は次のとおりです。

$(profileData.phones).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData.phones[i].label);
    $('.new_option').append(inputphone);
    // Reset the ul now and add a new empty ul
    $('.new_option').attr('class', 'ul_added');
    var p = $('.added_phone').parent().parent(); // This is the li above the ul
    p.append('<ul class="new_option"></ul>');
    // Set the values
    $('.added_phone').parent().find('label').text(profileData.phones[i].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[i].tag+"phone" + i);
    $('.added_phone').attr('value', profileData.phones[i].label);
});
于 2013-08-27T15:12:49.240 に答える