CODEWITHSUNDEEP
jquery
Hunter
Hunter

Reputation: 410

jQuery each is only affecting the last instance

I have got a weird jQuery issue that will most likely end up being something ridiculously minor, but after searching for a while I still can't get past it.

The issue
I have got a table with a list of domains. The table consists of two columns - domain name and IP address.

The IP address columns loads with the content of a loading icon, which is then supposed to be replace with the contents of an ajax call made.

The script is supposed to do a jQuery each() on a data attribute which is on the each IP column, take the data and perform a .get request which then returns that domains ip.

The problem When the .each runs, it checks the ip address and only replaces the final rowsloading icon.

Code

$("[data-domain]").each(function(){
        domain = $(this).data('domain');
        tr = $(this);

        $.get( "/database/ajax/domain/check", { domain: domain } )
          .done(function( data ) {
            tr.html(data);
          });
    });

Upvotes: 1

Views: 71

Answers (1)

aw04
aw04

Reputation: 11177

Think about the timing of what you're doing. You loop through some elements, and each time change a reference to the same tr variable to be the current element. You then make an async ajax call and register a callback. The loop continues to run and finish so naturally the value of tr is the last value.

Then your callbacks start firing, and they use the closed over value of the same variable (tr).

To achieve what you want, the obvious solution would be to create a new tr each time through the loop, which gets closed over inside your callback. To do this, simply declare it inside the loop (otherwise you're creating a global).

var tr = $(this)

Upvotes: 2

Related Questions