如何在AJAX函数中遍历jQuery？

我有困难与jQuery遍历。我有一个带有一组动态下拉框的表单，并且正在尝试根据元素类而不是id调用特定的动作，因为此表单可以在我的应用程序中克隆。如何在AJAX函数中遍历jQuery？

任何想法为什么我的遍历不起作用？我的$(this)电话会以某种方式失效吗？

HTML：

<div> 
    <label>Item:</label> 
    <select class="item" name="item" id="item"> 
     <option value="">Select</option> 
     ... 
    </select> 
</div>   
<div> 
    <label class="label>Options:</label> 
    <select class="options" name="options" id="options"> 

     ... 
    /select> 
</div>

的Javascript：

$(".item").change(function() { 

    var group_id = $(this).val(); 

    $.ajax({ 
     type: "POST", 
     url: "../../db/items.php?id=" + group_id, 
     dataType: "json", 
     success: function(data){ 
      $(this).parent().next().children('select.options').empty(); 
      $(this).parent().next().children('select.options').append('<option value="">Select</option>'); 
      $.each(data, function(i, val){  
       $(this).parent().next().children('select.options').append('<option value="' + val.group_id + '">' + val.name + '</option>'); 
      }); 
      $(this).parent().next().children('select.options').focus(); 
     }, 
     beforeSend: function(){ 
      $(this).parent().next().children('select.options').empty(); 
      $(this).parent().next().children('select.options').append('<option value="">Loading...</option>'); 
     }, 
     error: function(){ 
      $(this).parent().next().children('select.options').attr('disabled', true); 
      $(this).parent().next().children('select.options').empty(); 
      $(this).parent().next().children('select.options').append('<option value="">No Options</option>'); 
     } 
    }) 

});

来源

2012-01-06 Michael

是的，在回调中，'this'指的是别的东西。如果您想要对DOM元素进行引用，则必须先存储它。 – 2012-01-06 22:40:52

谢谢，但存储它如何？ – Michael 2012-01-06 22:41:30

可能重复[$（this）在AJAX成功不起作用]（http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working） – 2012-01-06 22:41:43

this不再是DOM元素，该事件被触发。

$(".item").change(function() { 
    $.ajax({ 
     /* options */ 
     context: this, 
     success: function() { 
      // this is now the element that was changed 
     } 
    }); 
});

您也可以存储在一个变量的this值，并在回调使用它：

$(".item").change(function() { 

    var group_id = $(this).val(); 
    var self = this; 

    $.ajax({ 
     type: "POST", 
     url: "../../db/items.php?id=" + group_id, 
     dataType: "json", 
     success: function(data){ 
      // use "self" instead of "this" 
     } 
    }) 

});

另注，您可以通过使用context选项$.ajax设置this值：你应该考虑缓存你的选择器以获得更好的性能（和可读性）。此外，您还可以连续使用jQuery的函数调用：

var $children = $(this).parent().next().children('select.options') 
    .empty() 
    .append('<option value="">Select</option>'); 

$.each(data, function(i, val){  
    $children.append('<option value="' + val.group_id + '">' + val.name + '</option>'); 
}); 
$children.focus();

来源

2012-01-06 22:41:41

我现在没有关于ajax调用中的上下文属性。正如我所建议的那样，定义另一个变量似乎更清晰。 – 2012-01-06 22:44:42

是啊，这$现在指的是在你的Ajax调用成功功能。添加这一行。

$(".item").change(function() { 

    var group_id = $(this).val(); 
    var item = $(this); // Added line

现在在你的ajax函数中使用$ this这个元素。

来源

2012-01-06 22:41:45

var group_id = $(this).val(); 
var myThis = $(this); 

    $.ajax({ 
     type: "POST", 
     url: "../../db/items.php?id=" + group_id, 
     dataType: "json", 
     success: function(data){ 
      myThis.parent().next().children('select.options').empty(); 
     ...

来源

2012-01-06 22:42:40

如何在AJAX函数中遍历jQuery？

回答

相关问题