4

動的に追加されたテキスト ボックスの値を取得するのに苦労しています。私は関数を使用して、そのおよび内のインデックス$.eachに従ってすべてのテキストボックスを反復処理しています。idid

<input type="text"  id="student_grde_G[1]" >
<input type="text"  id="student_grde_G[2]" >
<input type="text"  id="student_grde_G[3]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

jQuery:

$('#save_grade_button').click(function (){
    $.each($('#student_grde_G[]'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

これはうまくいきません。どうすればこれを修正できるか教えてもらえますか?

4

6 に答える 6

2

一般に、id は一意の識別子であるため、クラスを使用する方が適切です。id 内の配列を操作しないでください。投稿後にサーバー側でそれらを処理する場合は、次のようにすることをお勧めします。

<input type="text" class="studentGrade"  id="student_grde_G_1" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_2" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_3" name="studentGrade[]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

そしてあなたのスクリプトのために

$('#save_grade_button').click(function (){

         $('.studentGrade').each(function() {
           var grade =  $(this).val();
           alert(grade);
         });


     });

編集: jQuery 1.7 以降、イベントを.on()でバインドする必要があります

$('#save_grade_button').on('click', function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};

または、保存ボタンも動的になる場合

$(document).on('click', '#save_grade_button', 'gradeSaveClick' function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};
于 2013-01-09T10:22:23.130 に答える
2

それぞれに使用している選択は、あなたが考えているものと一致しません。[] は、要素の属性を一致させるためのものです。

たとえば、'$("img[alt]")' は alt 属性を持つすべての img タグを選択し、$("img[alt=foo]")' は alt 属性の値が foo であるすべての img タグを選択します。

入力要素を次のように変更する代わりにクラスを使用することをお勧めします

<input type="text" class="grades" id="student_grde_G[2]" >

jQueryを次のように変更します

$('#save_grade_button').click(function (){
    $.each($('grades'), function() {
        var grade =  $(this).val();
        alert(grade);
    });
});

you have を使用するとi、最後の要素が無視されます。インデックス (i) はゼロベースであるため、i の最初の値は 0 (この例では何も選択されません) であり、最後の値は要素の数から 1 を引いたものであり、最後の要素が選択されることはありません。

ただし、現在の要素はそれぞれに提供されている関数と同じようにアクセスできるためthis、関数に上記の変更を加えれば、「1 個ずつオフ」エラーを心配する必要はありません。

于 2013-01-09T10:21:41.317 に答える
2

item パラメーターを使用するだけです。

$('#save_grade_button').click(function (){
     $('input[type=text]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });

または @Adil の回答を組み合わせて:

$('#save_grade_button').click(function (){
     $('[id^=student_grde_G]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });
于 2013-01-09T10:18:53.107 に答える
1

ID の要素がありませんstudent_grde_G[]ワイルド カードstartsを使用してください。

ライブデモ

$('#save_grade_button').click(function () {
  $.each($('[id^=student_grde_G]'), function (i, item) {
    var grade = $(this).val();
    alert(grade);
  });
});
于 2013-01-09T10:18:23.137 に答える
0

入力にプレフィックス付きの ID を使用したい場合は、jquery ワイルドカード セレクターを使用できます。また、jquery セレクターを使用して成績の値を取得する代わりに、関数に渡されたアイテムを使用するだけでもかまいません。前述のように、クラスを入力に追加すると、より効率的に進めることができます。

$('#save_grade_button').click(function (){

   $.each($("input[id^='student_grde_G']"), function(i, item) { //uses wildcard selector

      var grade =  $(item).val();  //Use item instead of selector
          alert(grade);
      });
 });

例: http://jsbin.com/axenuj/1/edit

于 2013-01-09T10:22:09.877 に答える