How can I get the value of an object property in jquery?

Question

I have a group of objects on my page. I want to get the first one, so I do this:

var tmpLi = li.first();
console.dir(tmpLi);

This works fine; it returns this in firebug:

enter image description here

I need to return the value of the outerHTML element, but can't seem to figure out how to get it. I've tried:

var tmpLi = li.first().data("outerHTML");

and

var tmpLi = li.first().attr("outerHTML");

both of which return "undefined". Help?

Adil · Accepted Answer · 2012-12-26 18:15:45Z

3

You need DOM object for outerHTML instead of jQuery object so convert it to DOM object to access outerHTML property.

var tmpLi = li.first()[0].outerHTML;

answered Dec 26, 2012 at 18:15

Adil

148k25 gold badges217 silver badges207 bronze badges

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

2 Comments

I tried, this, and it printed out "There are no child objects".

Oops, never mind. Needed to change from console.dir to console.log and now it works.

Ricardo Lohmann · Accepted Answer · 2012-12-26 18:16:42Z

1

It returns an object, so you have to access it like the following.
li.first()[0].outerHTML

answered Dec 26, 2012 at 18:16

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

zzzzBov · Accepted Answer · 2012-12-26 18:17:19Z

1

You either need to use the prop method, which gets the underlying object's property value:

li.first().prop('outerHTML');

...or unwrap the DOM object from the jQuery selection:

li[0].outerHTML

answered Dec 26, 2012 at 18:17

zzzzBov

180k57 gold badges327 silver badges374 bronze badges