Change() inside each() jQuery

Question

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.

Answer 1

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)

Answer 2

Try with this

$('.element').each(function() {
    $(this).siblings('.sibling').change(function() {
       var mainElement = $(this).siblings('.element');
        // Play here
    });
});