将 jQuery 对象和内容转换为字符串？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2000438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert a jQuery object and contents to string?
提问by DA.
I'm grabbing various jquery objects to put into an array and later spit out as HTML.
我正在抓取各种 jquery 对象以放入一个数组，然后作为 HTML 吐出。
I'm trying to convert the jQuery object to a text string so it can be spit out as HTML later.
我正在尝试将 jQuery 对象转换为文本字符串，以便稍后可以将其作为 HTML 输出。
I'm using this technique at the moment:
我目前正在使用这种技术：
console.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).
例如，如果 $myObject 是<h2>My Title</h2>上面的只返回“我的标题”（没有 H2 标签）。
I've also trying using .text() but get the same result.
我也尝试使用 .text() 但得到相同的结果。
Is there a way to convert the entire jQuery object into a text string?
有没有办法将整个 jQuery 对象转换为文本字符串？
回答by DA.
Well, answering my own question.
嗯，回答我自己的问题。
console.log($('<div>').append($myObject.clone()).remove().html());
Thanks goes to John Feminella in this thread:
感谢 John Feminella 在此线程中：
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
http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-included.html
回答by Benoit Vidis
What you are looking is not to convert a JQuery object to a string but a DOM node to its HTML representation.
您正在寻找的不是将 JQuery 对象转换为字符串，而是将 DOM 节点转换为其 HTML 表示。
There is no builtin method in JQuery to do this, nor there is anything alike in Javascript.
JQuery 中没有内置方法可以做到这一点，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 + '>';
});
回答by Addsy
From your example, don't you just need to use call $myObject.html()?
从您的示例中，您不只需要使用 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?
然而，因为我猜你想要的可能不仅仅是那个，只是将对象转换为 JSON 就可以完成这项工作吗？
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
有几个 jQuery 插件可以做到这一点。我用过的那个一直对我很有用，似乎不再适用了，但你可以在这里找到它
http://jollytoad.googlepages.com/json.js
http://jollytoad.googlepages.com/json.js
A search of the jQuery plugin library gives these 2 as possible alternatives
对 jQuery 插件库的搜索给出了这 2 个可能的替代方案
http://plugins.jquery.com/project/JSONEncoder
http://plugins.jquery.com/project/LABSJSON
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
我从未尝试过它们中的任何一个，因此无法保证它们的有效性
回答by Thulasiram
console.log($('<div></div>').append($myObject.clone()).html());
回答by Thulasiram
<!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>
