Question

我很难获得动态附加文本框的值。我正在使用$.each函数根据id中的id和索引迭代所有文本框。

<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);
    });
});

这不起作用。谁能告诉我如何解决这个问题？

Answer 1

您只需使用item参数：

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

OR与@Adil的答案相结合：

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

Answer 2

您使用的选项与您的想法不符。 []用于匹配元素的属性。

E.g。 '$（“img [alt]”）'选择所有带有alt属性的img标签，$（“img [alt = foo]”）'选择所有img标签，其中alt属性的值为foo。

我建议使用类而不是将输入元素更改为

<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);
    });
});

使用i忽略了最后一个元素。索引（i）为零，因此i的第一个值为0（在您的示例中将不选择任何内容），最后一个是元素的数量减去1，导致最后一个元素从未被选中。

但是，由于当前元素在提供给每个元素的函数中可以作为this访问，因此如果对函数进行上述更改，则无需担心任何“off by one”错误

Answer 3

一般来说，最好为它使用一个类，因为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);
   });
};

Answer 4

您没有标识为student_grde_G[]的元素。请使用通配符starts。

<强> Live Demo

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

Answer 5

为所有文本框'student_grde'

添加了一个新类

<input type="text"  class="student_grde" id="student_grde_G[1]" >
      <input type="text" class="student_grde" id="student_grde_G[2]" >
      <input type="text" class="student_grde" 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'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

Answer 6

如果要为输入添加前缀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

使用jquery获取动态创建的文本框的值

6 个答案: