Change() inside each() jQuery
event-handling, jquery
Solution
One way to do it, is to use a closure. This will capture the variable in `$mainElement`, so to speak, using its current value.
$('.element').each(function() {
$sibling = // find a sibling to $this.
$mainElement = $(this); // memorize $(this)
$sibling.change(function($mainElement) {
return function() {
// use $mainElement
}
}($mainElement))
});
jsfiddle example (be sure to blur the textfield, after editing, otherwise `.change()` won't fire)
Problem
What is the best way to manage this kind of situation : ``` $('.element').each(function() { $sibling = // find a sibling to $this. $mainElement = $(this); // memorize $(this) $sibling.change(function() { // when sibling changes // do something using $mainElement // problem is, $mainElement is not the element you think // $mainElement is the last .element found.... }) }); ``` One solution would be a table... But then there is no advantage for the change() to be nested in the each()... My html example : ``` <div id="first"> <span class="element"></span> <input name="first" type="text" /> </div> <div id="second"> <span class="element"></span> <input name="second" type="text" /> </div> ``` In this exemple, `$sibling = $(this).next('input');` for instance.