Question

I have a for statement like

function myspecialFunction(elem) {

var currentItem = elem;
var currentImg = elem.find('img');

jQuery(currentImg).append('some text');
...

The problem seems to be that when elem has >1 of the same image item – it overwrites the data of the previous ? That is, when the same currentImg is returned – the statement overwrites the data of the previous ?

How can I ensure that same currentImg values are preserved ? i.e. I was hoping to use like $(this) but it doesn’t appear to work ? My html looks like

Answer 1

You could rewrite the above as

jQuery('.class').each(function() {
    myspecialFunction(jQuery(this));
});

function myspecialFunction(elem) {  
    var currentItem = elem;
    var currentImg = elem.find('img');

//....
}

this is more idiomatic and $(selector).each() introduces a closure to ensure that the correct value is captured in each loop iteration.

To do something similar with a plain for loop would be

var myClass = jQuery('.class');

for (var i = 0, len = myClass.length; i < len; i++) {
    (function () {
        myspecialFunction(jQuery(myClass[i]));
    })();
}

function myspecialFunction(elem) {

    var currentItem = elem;
    var currentImg = elem.find('img');
    // ...
}

Depending on your target browsers, being more specific than just a CSS class may help out too i.e. if all of the elements that you are selecting are all of the same tag name, then use the tag name in the selector.