Jquery find collection of objects and convert it to html string

Question

When I use jquery find() to get elements, it will return a collection of objects.

So, basically I run:

 $("#eventlist").find("span")

Now if I run:

 $("#eventlist").find("span").html()

It returns the html of just the first element in the object.

When I try

 JSON.stringify($("#eventlist").find("span"))

I get an error: DOMException: Failed to read the 'selectionDirection' property from 'HTMLInputElement':

My question is, how could I get all elements in one big html string?

yes, just a big html string containing all "contentcontent2content3" — sigmaxf
– sigmaxf, Commented Dec 9, 2014 at 4:53

Arun P Johny · Accepted Answer · 2014-12-09 05:00:44Z

1

You can use .map() like

var array = $("#eventlist").find("span").map(function () {
    return this.outerHTML
}).get();
var html = array.join('')

answered Dec 9, 2014 at 5:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

A.B · Accepted Answer · 2014-12-09 04:59:18Z

1

You can alterate over each and can stroe html in some varaible, see the ouptut and see console

var html="";
$("#eventlist").find("span").each(function(){

html+=$(this).parent().html();
})

console.log(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="eventlist">
<span>content1</span>
<span>content1</span>
<span>content1</span>
<span>content1</span>
  </div>

edited Dec 9, 2014 at 4:59

answered Dec 9, 2014 at 4:53

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Comments

Balachandran · Accepted Answer · 2014-12-09 05:02:02Z

0

use outerHTML in javascript

$("#eventlist").find("span").each(function () {
   console.log( this.outerHTML);
})

answered Dec 9, 2014 at 5:02

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Jquery find collection of objects and convert it to html string

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related