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?

Why do you expect this to work x[0].pic.attr('src')? Your pic is a string, not a jQuery element. Check the console, there should be a nice error in there with some clue. — elclanrs
– elclanrs, Commented Jul 28, 2014 at 19:06
I believe the syntax would work if x was an array of objects x = [{}, {}];. But the value of x in the example you posted would just be the first object x = {}, {} — Sushanth --
– Sushanth --, Commented Jul 28, 2014 at 19:11
"If I log to console like this: console.log($(x[0].pic).attr('src')) it works" ... then use that :) — Felix Kling
– Felix Kling, Commented Jul 28, 2014 at 19:12
correct your code and put two [ ] around it to make it an array. — Varun Nath
– Varun Nath, Commented Jul 28, 2014 at 19:15

Zombiesplat · Accepted Answer · 2014-07-28 19:10:58Z

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');

answered Jul 28, 2014 at 19:10

Zombiesplat

9639 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Kling Over a year ago

The OP seems to know about this already: "If I log to console like this: console.log($(x[0].pic).attr('src')) it works"

Varun Nath · Accepted Answer · 2014-07-28 19:18:45Z

1

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');

answered Jul 28, 2014 at 19:18

Varun Nath

5,6623 gold badges25 silver badges39 bronze badges

Comments

Inder · Accepted Answer · 2014-07-28 19:30:05Z

1

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

answered Jul 28, 2014 at 19:30

Inder

1701 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related