Jquery return Object

Question

I'm hoping there is an easy fix to my problem. I'm basically doing a simple jquery search and the return value is an array with a nested set of span html elements. So a query like this:

$('.sqs-simple-like').eq(0);

Would return the first object that has the same class structure of '.sqs-simple-like'. When I query this in the console of the developer window, it returns this:

[<span class="sqs-simple-like" data-item-id="db8a2c74088b44608eed112e15e45207" data-like-count="0" id="yui_5a41b52d-e23f-449d-a828-981814b19c5e">
  <span class="like-icon"></span><span class="like-count">0 Likes
  </span>
</span>]

So, it returns an array with a nested set of span items. Essentially, I want to use the entire return object as a simple string. Basically, I just want to insert this nested span element into another div on my site. However, I can't seem to access the return value as a simple string. If I use the .html() method, it only returns the inner span element (but not the entire nested structure). I've tried searching for other methods, but nothing seems to work. The .toString() method doesn't seem to work either. Is there some other method by which I can convert this nested span element into a simple string?

"it returns an array with a nested set of span items." - Not quite. It returns a jQuery object (which is array-like, but not an array) containing a reference to only the sqs-simple-like span; the span itself does of course have child elements, so depending on exactly how you log it in the console you may see the child elements. — nnnnnn
– nnnnnn, Commented Jul 5, 2013 at 21:41

A. Wolff · Accepted Answer · 2013-07-05 22:54:15Z

4

DEMO

var str = $('.sqs-simple-like').get(0).outerHTML; //or use [0] instead of get(0)

edited Jul 5, 2013 at 22:54

answered Jul 5, 2013 at 21:15

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

6 Comments

John Dvorak Over a year ago

also note you can use [0] instead of get(0) for the same effect

John Dvorak Over a year ago

If you don't care about IE8, you can even do var str = document.getElementsByClassName("sqs-simple-like")[0].outerHtml, which is slightly faster.

A. Wolff Over a year ago

@JanDvorak i'm trying to forget it, using [0], just because my boss don't like it ;)

Michael Geary Over a year ago

@roasted - There is no reason at all to use .get(0) instead of [0]. .get(0) is simply a slower way to do [0]. Your boss may be thinking along the lines of "[0] makes assumptions about the nature of the jQuery object. It isn't future-proof!" But this is a mistake: The jQuery return object is an "array-like" object and always will be. In fact, the only reason that .get() even exists in the API at all is for compatibility with extremely old code. I was the one responsible for making the jQuery object an "array-like" object, so feel free to send your boss my way with questions. :-)

A. Wolff Over a year ago

@MichaelGeary the reason he wants us to use .get() method is for consistency in code. We often use negative index with get() method which is not possible using array index. Otherwise, i'm for sure agree with you, thanks for your feedback, i appreciate :)

|

Jon · Accepted Answer · 2013-07-05 21:15:05Z

0

That's because .html returns the inner HTML of the matched element.

You can get the result you want by wrapping another element around the target using .wrap like this:

$('.sqs-simple-like').eq(0).clone().wrap("div").html();

I have added a call to .clone before wrapping because without it .wrap would also insert the div element in the live DOM, which could be undesirable.

answered Jul 5, 2013 at 21:15

Jon

439k85 gold badges756 silver badges820 bronze badges

Collectives™ on Stack Overflow

Jquery return Object

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related