Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

Question

Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

Apologies for the poorly worded question, but I'm struggling to find a better way to phrase it.

I'm currently working with a .each() loop where I need to update a specific css() parameter of each item in the loop. However, I can't seem to get it right.

Below is the code snippet I'm using:

$(document).find('.test').find('p').each(function(){
    var test=$(this).css('background-image').split('(')[1].split(')')[0];
    var retGet=$.get(test);
    $(this).css({
        'background-image':  'url(data:image/png;base64,'+retourGet.responseText+')'
    }); 
});

I've omitted the url editing part (the second line provides the current url which I edit).

Unfortunately, when running this code, I receive undefined values in my css parameters. It appears that the $.get loading process isn't complete before I try to change the background image.

I attempted something like this:

$.get( test, function( data ) {

});

But I'm unsure how to access the individual $(this) element within the .each() loop here.

jquery html css ajax

Answer 1

Answer №1

Utilize the parameters provided by the each function:

$(document).find('.example').find('span').each(function(index, element){
    var source=$(element).css('background-image').split('(')[1].split(')')[0];
    var response=$.get(source);
    $(element).css({ // element represents the current .example object
        'background-image':  'url(data:image/png;base64,'+response.responseText+')'
    }); 
});

If you wish to incorporate the callback function from .get, make use of the element variable:

$.get( source, function( data ) {
 $(element).css({ // element is the current .example object
        'background-image':  'url(data:image/png;base64,'+data+')'
    }); 
});

Answer 2

Utilize the parameters provided by the each function:

$(document).find('.example').find('span').each(function(index, element){
    var source=$(element).css('background-image').split('(')[1].split(')')[0];
    var response=$.get(source);
    $(element).css({ // element represents the current .example object
        'background-image':  'url(data:image/png;base64,'+response.responseText+')'
    }); 
});

If you wish to incorporate the callback function from .get, make use of the element variable:

$.get( source, function( data ) {
 $(element).css({ // element is the current .example object
        'background-image':  'url(data:image/png;base64,'+data+')'
    }); 
});

Answer 3

Answer №2

There are a couple of ways to tackle this issue. One option is to follow the approach outlined by @celerno (which is likely the recommended course of action)

Another solution involves utilizing function binding to ensure that the this pointer is correctly set.

$.get( test, function( data ) {
    $(this) // will now behave as expected
}.bind(this));

Note: The built-in bind method is only supported in browsers that conform to ECMAScript 5 and newer standards. Consequently, this technique may not function properly in older browsers such as IE8 and earlier versions.

Answer 4

There are a couple of ways to tackle this issue. One option is to follow the approach outlined by @celerno (which is likely the recommended course of action)

Another solution involves utilizing function binding to ensure that the this pointer is correctly set.

$.get( test, function( data ) {
    $(this) // will now behave as expected
}.bind(this));

Note: The built-in bind method is only supported in browsers that conform to ECMAScript 5 and newer standards. Consequently, this technique may not function properly in older browsers such as IE8 and earlier versions.

Answer 5

Answer №3

Utilize the index and value parameters when using the each method:

$(document).find('.test').find('p').each(function(i, val){
    var test=$(val).css('background-image').split('(')[1].split(')')[0];
    var retGet=$.get(test);
    $(val).css({
        'background-image':  'url(data:image/png;base64,'+retourGet.responseText+')'
    }); 
});

It's important to note that the function() should be replaced with function(i,val) and $(this) should be replaced with $(val). For more information, refer to: http://api.jquery.com/jquery.each/

(Encountered this issue before - was quite frustrating)

Answer 6

Utilize the index and value parameters when using the each method:

$(document).find('.test').find('p').each(function(i, val){
    var test=$(val).css('background-image').split('(')[1].split(')')[0];
    var retGet=$.get(test);
    $(val).css({
        'background-image':  'url(data:image/png;base64,'+retourGet.responseText+')'
    }); 
});

It's important to note that the function() should be replaced with function(i,val) and $(this) should be replaced with $(val). For more information, refer to: http://api.jquery.com/jquery.each/

(Encountered this issue before - was quite frustrating)

Answer 7

Answer №4

If you don't provide your fiddle, it's hard for me to diagnose your issue. However, I encountered something similar in the past.

You can try testing out this solution: http://codepen.io/gc-nomade/pen/bscaF

Here are some explanatory comments:

$(".test").children().each(function() {
  var element = $(this).get(0);
  $(this).attr("data-tag", element.nodeName);

   if (element.nodeName == 'P') {
     var test = $(this).css('background-image').split('(')[1].split(')')[0];
     var response = $.get(test);   
    // this.style.background = 'url(data:image/png;base64,'+response.responseText+')';// does not work here out of context
    //  this.css('background','blue'); //does not work
     this.style.background = 'red';
   }
})

Answer 8

If you don't provide your fiddle, it's hard for me to diagnose your issue. However, I encountered something similar in the past.

You can try testing out this solution: http://codepen.io/gc-nomade/pen/bscaF

Here are some explanatory comments:

$(".test").children().each(function() {
  var element = $(this).get(0);
  $(this).attr("data-tag", element.nodeName);

   if (element.nodeName == 'P') {
     var test = $(this).css('background-image').split('(')[1].split(')')[0];
     var response = $.get(test);   
    // this.style.background = 'url(data:image/png;base64,'+response.responseText+')';// does not work here out of context
    //  this.css('background','blue'); //does not work
     this.style.background = 'red';
   }
})

Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Connecting Node.js Post script to an HTML form: A step-by-step guide

Methods for effectively redirecting a Java ResponseWriter

Transmitting the identification number of a post with the help of J

Selecting Laravel lists by month option

Selenium Python can be used to save a web page as a

Having trouble with the HTML5 canvas for loop not rendering the initial object in the array?

My attempt at creating a straightforward sorting function turned out to be ineffective

Tips on avoiding quotation marks in a Less variable containing a color identifier

What is the best way to showcase my subscription form on a web browser?

Combining two flex elements with auto-growing capabilities in react-native

Locate the HTML code following an AJAX response

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

Generating an error when the input is focused

What is preventing my ActionResult from accessing the value of this jQuery AJAX post?

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Concealing a column within an Angular Material table

The function you are trying to execute in jQuery Mobile is not defined

Exploring the Integration of jQuery AJAX in a Contact Form

Allow users to manually resize <td>'s within a platform

Versatile dataTable designed to seamlessly integrate with various data structures