php - Lost in jQuery .each() -

in script below, i'm trying parse through select list , each option, call php returns value (psuedo true/false) based on options "value" attribute.

however, when i'm inside $.get [to evaluate return value , execute script against current option in each(),] can't figure out how reference current option element in order modify it.

$('#my_select').click(     function(){          $('#my_select option').each(             function(){                 $.get(                     '<?php echo getstyle.php',{option: $(this).val()},                     function(response){                         alert($(this).val()); //returns empty alert. should return value of current option                         //$(this).attr("disabled","disabled");                         //if (response.success){$(this).attr("disabled","disabled");}                     });             });     }); 

here's php script reference...

<?php      //getstyle.php      $myoption = $_request['option'];     $file = "styles/".$myoption."/style.css";     //echo json_encode(file_exists($file));         if (!file_exists($file))         {         $response = array('success' => true);         }         else         {         $response = array('success' => false);         }     echo json_encode($response); ?> 

this within get success callback won't refer element anymore (any time there's new function, this within function may different this outside of it, , be; more here).

you can solve this, using closure have:

$('#my_select').click(     function(){          $('#my_select option').each(             function(){                 // ===> remember option here, in variable callback close on                 var option = $(this);                 $.get(                     '<?php echo getstyle.php',{option: option.val()},                     function(response){                         // ===> use variable below                         alert(option.val()); //returns empty alert. should return value of current option                         //option.attr("disabled","disabled");                         //if (response.success){option.attr("disabled","disabled");}                     });             });     }); 

or can use ajax instead of get (get wrapper anyway) , use context parameter tell jquery use this when calling callbacks:

$('#my_select').click(     function(){          $('#my_select option').each(             function(){                 $.ajax({                    url:     '<?php echo getstyle.php',                    data:    {option: $(this).val()},                    context: this,                    success: function(response){                             alert($(this).val()); //returns empty alert. should return value of current option                             //$(this).attr("disabled","disabled");                             //if (response.success){$(this).attr("disabled","disabled");}                        }                     });             });     }); 

---

edit: below, @hakre asked, referring first example above:

due concurrency, doesn't value of option unpredictable within callback function?

the answer no, it's question. reason lies @ heart of how javascript resolves free symbols (e.g., stand-alone "variable" names) , how closures work.

when function called, javascript interpreter creates called "execution context" specific function call. execution context has we'll call "variable object" holds variables , such related specific call function (technically they're held on [deep breath] binding object of variable context of execution context — gotta love spec-speak).

functions created within function call keep reference variable object execution context in created; how closures work. interpreter resolves free symbol looking on variable object this function call see if there's matching variable (i'm simplifying here). if there isn't, looks @ variable object containing execution context, , 1 outside that, etc., etc., until gets global context. (this how global variables work; they're natural consequence of closures.) chain of variable objects called scope chain.

so in above, there multiple option variables, each intrinsically tied get callback defined in same call. callback sees correct option variable, regardless of timing.