Change () dans chaque () jQuery - jQuery, traitement des événements

Quelle est la meilleure façon de gérer ce genre de 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....
})
});

Une solution serait une table ... Mais alors il n'y a aucun avantage à ce que change () soit imbriqué dans each () ...

Mon exemple html:

<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>

Dans cet exemple, $sibling = $(this).next("input"); par exemple.

Réponses:

Une façon de le faire est d’utiliser un fermeture. Cette volonté Capturer la variable dans $mainElement, pour ainsi dire, en utilisant sa valeur actuelle.

$(".element").each(function() {

$sibling = // find a sibling to $this.
$mainElement = $(this); // memorize $(this)
$sibling.change(function($mainElement) {
return function() {
// use $mainElement
}
}($mainElement))
});

exemple jsfiddle (assurez-vous de rendre le champ de texte flou, après avoir été édité, sinon .change() ne tirera pas)

Essayez avec ceci

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

$(".element .sibling").each(function( ind, el) {

$parent = $( el ).closest( ".element" );
$( el ).change(function() {
$parent.doSomething();
});

});

Je dirais que le meilleur pari pour vous est d’utiliser un.chacun sur les frères et soeurs, et ensuite trouver le relatif ". Élément" pour le frère. Cela dépend de votre code, bien sûr. Sinon, quelque chose comme ceci pourrait fonctionner, même si cela semble un peu superflu à cause de .each:

$(".element").each(function() {
$(this).siblings(".sibling").change(function() {
var mainElement = $(this).siblings(".element");
// Do whatever you want here...
});
});