如何将 jQuery 对象数组转换为 HTML 字符串

Question

在 jQuery 无限旋转木马中，它使用 .clone() 来实现无限效果。这很有效，除非被克隆的代码具有 HTML5 元素。IE7 和 IE8 在将特定于 HTML5 元素的 CSS 规则应用于克隆或其他页面后加载的元素时会出现问题。 innerShiv JavaScript 插件以一种方式插入元素，使得 IE7 和 IE8 可以通过适当的 CSS 正常渲染。

问题是 innerShiv 接受一个 HTML 字符串作为参数，但 jQuery 的 .clone() 方法返回一个 jQuery 对象数组。

为了同时使用这两种方法，我需要将 .clone() 的输出转换为 innerShiv 可以解析的 HTML 字符串。

你有没有想过如何解决这个问题？

- WNRosenberg

---

只需在这些对象上调用 .html() 即可。 - Brad Christie

Answer 1

HTML:

<p class="foo"><canvas class="bar"></canvas></p>

JavaScript: ^[Ref]

// grab the object, with HTML 5 element(s).
var p = $('p');

// clone it
var c = p.clone();

// grab the inner html (wrap it so we can get the HTML)
var html = $('<div>').append(c).html();

// alert us of the contents
alert(html);

Demo:

http://jsfiddle.net/bradchristie/tDFYn/

- Brad Christie

Answer 2

var html = $.parseHTML(yourHtmlString); //Returns an Array of HTML Objects

//some operations on html like $(html).find() ...

html  = $('<div>').append(html).html();  // Returns string (string of html)
console.log(html);

- Adel Mourad

---

你应该考虑添加所提出解决方案的说明。 - il_raffa

Answer 3

使用.clone().html();，它会将对象转换为字符串。 看一下：http://jsfiddle.net/9k2LS/ -编辑-

重新考虑：确实@Jazzerus，为什么要使用.clone()？.html()没有clone()也可以。

- user657496

---

.html()没有.clone()的话，从技术上讲是不完全一样的，因为.clone()会复制当前对象和祖先元素。而.html()只是祖先元素的代码。 - Brad Christie