jQuery - attribute value undefined

Question

Html code of an svg element :

<image xlink:href="start.gif" style="pointer-events:none" x="165" y="175" width="100" height="100" stroke-width="1" transform=" scale(1 1) translate(0 0)"/>

Just as a POC,

$('image').attr('xlink:href');

does return the attribute value as start.gif.

Now I need the attribute values of all the image elements, so I wrote a function

function script()
{
    var result = new Array();
    var elements = selenium.browserbot.getCurrentWindow().jQuery('image');
    for(var i = 0 ; i < elements.length ; i++)
    {
        result[i] = $(this).attr('xlink:href');
    }
    return result;
}
script();

but this returns undefined

Why is that happening?

And yeah, I did try using jQuery's $.each(function(key, value)), but selenium throws "Error: Threw an exception : c.call is not a function". Didn't understand what c and call refers to, so thought to use js for loop.

Answer 1

Use jQuery .each and try with $(this)

var elements = selenium.browserbot.getCurrentWindow().jQuery('image');
elements.each(function(i) {
    result[i] = $(this).attr('xlink:href');
});

Answer 2

Why is that happening? Because this isn't what you think it is (or want it to be) in the scope of that function. Without knowing the exact context, this may point to the window, or another element, or an instance of an object.

You have a list of images stored in your elements array, and you want to create a jQuery object containing the image stored at index i of that array, so use $(elements[i]) rather than $(this).

I expect what happened is that after your initial failed attempt at using $.each(), you modified it to the standard Javascript for loop but left the (now incorrect) use of this to refer to the current element in the iteration.

Answer 3

Try:

result[i] = $(elements[i]).attr('xlink:href');