How to access an attribute of an img tag in an object within an array?

Question

I have an array of two objects like this:

x = {
        word: "Gun",
        pic: "<img id='pic' src='images/stimuli/gun.gif'/>",
    }, {
        word: "Hammer",
        pic: "<img id='pic' src='images/stimuli/hammer.gif'/>",
    }

I have to compare the first element of this array via the src attribute to another image tag y:

<img id="pic11" height="115" width="90" src="images/stimuli/gun.gif"/>

And I tried this comparison and it gives "undefined is not a function":

x[0].pic.attr('src') == pic11.src

If I log to console like this: console.log($(x[0].pic).attr('src')) it works I get images/stimuli/gun.gif but I cannot access via the variable x in my script.

In other words, I fail to access the src attribute of the img tag of the object in my array. How do I do that?

Answer 1

Create a jQuery object from the pic attribute and use the .attr() like you were wanting to.

var img1 = $(x[0].pic);
var src = img1.attr('src');

Answer 2

Wrap the tag image tag that you need to access in a jquery wrapper and then try and get the src attribute.

var src = $(x[0].pic).attr('src');

Answer 3

x[0].pic returns a string and not HTML code. So what you need is, convert this String to HTML code and then use $(selector).attr() on it. Below is the changed code:

$($.parseHTML(x[0].pic)).attr('src') == pic11.src