AJAX関数内でjQueryをトラバースする方法は？

Question

jQueryでトラバーサルするのが難しいです。私はドロップダウンボックスの動的セットを持つフォームを持っており、このフォームは私のアプリケーションで複製できるので、idの代わりに要素クラスに基づいて特定のアクションを呼び出そうとしています。

私のトラバースがうまくいかない理由はありますか？私の$(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>'); 
     } 
    }) 

}); 

Answer 1

thisはもはやイベントがトリガされたことをDOM要素です。あなたはまた、変数にthisの値を格納し、コールバックにそれを使用することができます

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

：

$(".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" 
     } 
    }) 

}); 

別のノートあなたは$.ajaxのcontextオプションを使用して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(); 

Answer 2

うんを、$これが今、あなたのAJAX呼び出しで成功機能を指します。この行を追加します。

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

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

ここで、ajax関数では、$ thisを使用する項目を使用します。

Answer 3

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(); 
     ...