Convert a jQuery object and contents to string?
I'm grabbing various jquery objects to put into an array and later spit out as HTML.
I'm trying to convert the jQuery object to a text string so it can be spit out as HTML later.
I'm using this technique at the moment:
conso开发者_开发技巧le.log($myObject.clone().wrap('<div></div>').html());
However, that only appears to be grabbing the contents of my object.
For example, if $myObject is <h2>My Title</h2> the above only returns 'My Title' (no H2 tags).
I've also trying using .text() but get the same result.
Is there a way to convert the entire jQuery object into a text string?
Well, answering my own question.
console.log($('<div>').append($myObject.clone()).remove().html());
Thanks goes to John Feminella in this thread:
How do you convert a jQuery object into a string?
who references this post:
http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html
What you are looking is not to convert a JQuery object to a string but a DOM node to its HTML representation.
There is no builtin method in JQuery to do this, nor there is anything alike in Javascript.
It is a bit tedous but you can, however, rebuild it. The code below is not complete nor tested but here is the idea
var h = '';
$('#my_selector').each(function(){
h += '<' + this.NodeName;
for(var k in this.attributes){
h += ' ' + this.attributes[k].nodeName + '="' + this.attributes[k].value + '" ';
}
h += '>';
h += this.innerHTML;
h += '</' + this.NodeName + '>';
});
From your example, don't you just need to use call $myObject.html()?
However, since I'm guessing what you're after is probably not just that, would just converting the object to JSON do the job?
There's a couple of jQuery plugins to do that. The one I've used, which has always worked great for me, doesn't seem to be about any more but you can get it here
http://jollytoad.googlepages.com/json.js
A search of the jQuery plugin library gives these 2 as possible alternatives
http://plugins.jquery.com/project/JSONEncoder
http://plugins.jquery.com/project/LABSJSON
I've never tried either of them tho so can't vouch for how effective they are
console.log($('<div></div>').append($myObject.clone()).html());
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnCreateNewDiv').click(function () {
$('#result').append($('<div></div>').append($('#testClone').clone()).html());
$('#result div:last').show();
});
});
</script>
<style type="text/css">
.Clone
{
background-color: Red;
}
.Clone h1
{
color: Lime;
}
</style>
</head>
<body>
<input type="button" value="Create New Div" id="btnCreateNewDiv" />
<span id="result"></span>
<div id="testClone" class="Clone" style="display: none;">
<h1>
test
</h1>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论