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.

Have you tried: var $sibling = // find a sibling to $this. var $mainElement = $(this); — luckystars, Feb 16 '13 at 12:11

score 8 · Accepted Answer · edited May 23 '17 at 12:09

8

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)

edited May 23 '17 at 12:09

Community

1
1

answered Feb 16 '13 at 12:14

Decent Dabbler

22,532
8
74
106

Perfect, exactly what I looked for :) – Adrien Gorrell Feb 16 '13 at 15:43

Roko C. Buljan · Answer 2 · 2013-02-16T12:27:48.707

1

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

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

});

edited Feb 16 '13 at 12:27

answered Feb 16 '13 at 12:14

Roko C. Buljan

196,159
39
305
313

This seems another proper solution. Would you rather do this than a closure and why? – Adrien Gorrell Feb 16 '13 at 15:56

score 1 · Answer 3 · answered Feb 16 '13 at 12:14

1

Try with this

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

answered Feb 16 '13 at 12:14

GautamD31

28,552
10
64
85

score 0 · Answer 4 · answered Feb 16 '13 at 12:12

I'd say the easiest bet for you is to use an .each on the siblings, and then finding the relative ".element" for the sibling. Depends on your code of course. Otherwise, something like this might work, even though it feels a bit redundant due to the .each:

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

Change() inside each() jQuery

4 Answers4

Linked

Related